Bootstrap 3 modal doesn't close outside

I created a modal using a call,

$('#myModalContent').modal('show'); 

html:

 <div class=" modal fade" id="myModalContent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> </div> <div class="modal-body"> </div> </div> </div> </div> 

The problem is that I click outside the modal popup but it doesn't close. (closes on esc)

+8
twitter bootstrap
source share
5 answers

I wrote my own code to solve this problem.

  $("body").on("click", ".modal-dialog", function(e) { if ($(e.target).hasClass('modal-dialog')) { var hidePopup = $(e.target.parentElement).attr('id'); $('#' + hidePopup).modal('hide'); } }); 
+8
source share

Just add the data-backdrop="static" and data-keyboard="false" attributes to this modal (that is, where you have class='modal' )

data-backdrop="true" is the default behavior that allows background rejection of the click, and data-backdrop="static" is the behavior you explain, but not the deviation, so you probably set it somewhere to " static".

data-keyboard="false" to disable ESC

+4
source share

You can pass parameters modal as follows:

 $('#myModal').modal({ show:true, backdrop:true, keyboard:true }) 
+1
source share
 //remove modal class from modal start div and $('#MyModal').modal({ backdrop: false }); $('body').removeClass("modal-open"); 
0
source share
  It should work if you are using bootstrap 3 <div class="modal fade bs-example-modal-sm" id="modalExample" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button> <h4 class="modal-title">Small Modal</h4> </div> <div class="modal-body">...</div> </div> </div> </div> 

and name it like: $ ('# modalExample'). modal ();

-one
source share

All Articles