javascript - bootstrap modal click on div appears once -
i've used bootstrap modal when click on div modal pops up. however, on clicking close, if click on div modal not pop again. wondering how can 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">×</span></button> <h4 class="modal-title">modal title</h4> </div> <div class="modal-body"> <p>one fine body…</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'); });
you should move <div class="modal fade>...</div>
outside of <div id="userdiv">...</div>
, way, .click()
function captured correctly , open 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">×</span></button> <h4 class="modal-title">modal title</h4> </div> <div class="modal-body"> <p>one fine body…</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 bootply example.
Comments
Post a Comment