Menu
I have created a modal using call,
$('#myModalContent').modal('show');
html is:
<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">×</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Problem is when i click outside the modal popup, its doesn't close. (its closes on esc)
486
When the Button is clicked, the HTML DIV is referenced using jQuery and its modal function is called along with properties data-backdrop: "static" and data-keyboard: false which disables the closing of the Bootstrap Modal Popup when clicked outside.
Modal Header You have two options to close this modal: Click on the "x" or click anywhere outside of the modal!
You can prevent closing of modal dialog by setting the beforeClose event argument cancel value to true.
There are few ways to close modal in Bootstrap: click on a backdrop, close icon, or close button. You can also use JavaScript hide method. Click the button to launch the modal.
The bootstrap modal prevent close on click outside with the use of HTML and Boostrap only. Also, on pressing the escape ('ESC') button of a keyboard, the modal will not close. You can stop closing the modal on mouse click outside of the Bootstrap modal popup.
Answer: Use the Modal's backdrop Option. By default, if you click outside of the Bootstrap modal window i.e. on the backdrop or dark area it will close and disappear.
But you can prevent this from happening by setting the modal's backdrop option to static and keyboard option to false, as shown in the following example:
On the Bootstrap page, it says that multiple modals are not supported. Always try to place a modal's HTML code in a top-level position in your document to avoid other components affecting the modal's appearance and/or functionality.
You can pass options to the modal as :
$('#myModal').modal({
show:true,
backdrop:true,
keyboard:true
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
