Bootstrap 3 modal doesn't close outside

Question

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)

Answer 1

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'); } }); 

Answer 2

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

Answer 3

You can pass parameters modal as follows:

 $('#myModal').modal({ show:true, backdrop:true, keyboard:true }) 

Answer 4

 //remove modal class from modal start div and $('#MyModal').modal({ backdrop: false }); $('body').removeClass("modal-open"); 

Answer 5

  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 ();