Menu
I want to close bootstrap modal box conditionally. If I use
$('#modal').modal('hide'); this, some thing goes wrong with my code. And If I use data-dismiss="modal" in the HTML template, modal dismiss action performs before my actual functionality should be perform on button click.
So, there is any other way to close bootstrap modal or any idea to use data-dismiss="modal" at run time?
332
Clicking on the modal “backdrop” will automatically close the modal. Bootstrap only supports one modal window at a time.
Answer: Use the modal('hide') Method You can simply use the modal('hide') method to hide or close the modal window in Bootstrap using jQuery.
Another way to dismiss the modal when clicking outside involved taking advantage of the bubbling nature of the javascript events. clicking on . modal will cause the click event to propagate like this . modal -> #modal-root -> body while clicking outside the modal will only go through #modal-root -> body .
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.
You can do it with auto modal closing behavior which uses the data-dismiss attribute itself or with the manual modal opening (as i guess you are doing currently) , by subscribing to hide event and use preventDefault on the event.
$('yourmodalselector').on('hide',function(e){
if(yourConditionNotToCloseMet){
e.preventDefault();
}
});
See Documentation
hide event event is fired immediately when the hide instance method has been called, which gets called wither way and this is the best place to prevent the modal from closing.
88
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
