Menu
I'm using the Twitter Bootstrap modal as a wizard window, and would like to prevent the user from closing it when clicking outside of the modal or when pressing escape. Instead, I want it to be closed when the user presses the finish button. How could I achieve this scenario?
894
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.
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 .
Add both backdrop: static and keyboard: false to your modal options. The first one disables the background click, the second one the escape key. backdrop: 'static' - backdrop is present but modal window is not closed when clicking outside of the modal window.
The backdrop option specifies whether the modal should have a dark overlay (the background color of the current page) or not.
Works too, data-backdrop="static" to click out and data-keyboard="false" to Esc in your div modal:
<div id="idModal" class="modal hide" data-backdrop="static" data-keyboard="false"> If using JavaScript then:
$('#myModal').modal({ backdrop: 'static', keyboard: false }) or in HTML:
<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#"> 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