CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
doohsam
doohsam

Reputation: 47

bootstrap modal click on div appears once

I've used bootstrap modal so that when I click on the div the modal pops up. However, on clicking close, if I click back on the div the modal does not pop up again. Just wondering how I can do this.

The HTML:

<div class="col-sm-3 col-lg-3" id="userdiv">
    <div class="modal fade " data-backdrop="false">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title">Modal title</h4>
              </div>
              <div class="modal-body">
                   <p>One fine body&hellip;</p>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

              </div>
          </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

The JS:

var $modal = $('.modal').modal({
    show: false 
});
$('#userdiv').on('click', function() {
    $modal.modal('show');
});

Upvotes: 0

Views: 2038

Answers (2)

user1012181
user1012181

Reputation: 8726

This should work without any JS

jsFiddle: http://jsfiddle.net/b501uat6/1/

<div class="col-sm-3 col-lg-3" id="userdiv" data-toggle="modal" data-target="#myModal"> CLICK EXACTLY ON THE TEXT
    <div class="modal fade " id='myModal' data-backdrop="false">
      <div class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title">Modal title</h4>
              </div>
              <div class="modal-body">
                   <p>One fine body&hellip;</p>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

              </div>
          </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Upvotes: 1

Tim Lewis
Tim Lewis

Reputation: 29278

You should move your <div class="modal fade>...</div> outside of your <div id="userdiv">...</div>, that way, the .click() function will be captured correctly and open the modal:

<div class="col-sm-3 col-lg-3" id="userdiv">
  <h4>User Div</h4>
</div>

<div class="modal fade " data-backdrop="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

See this bootply for an example.

Upvotes: 0

Related Questions