Menu
I am making a bootstrap website, with a couple of Bootstrap 'Modals'. I'm trying to customize some of the default features.
Problem is this; You can close the modal by clicking on the background. Is there anyway to disable this feature? On specifc modals only?
Bootstrap modal page
289
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.
Data-keyword="false" is to prevent closing modal while clicking Esc button, while data-backdrop="static" , allows you keep modal pop-up opened when clicking on Gray area.
The backdrop option specifies whether the modal should have a dark overlay (the background color of the current page) or not.
We can close the modal pop-up in the following ways:modal('hide'); //Using modal pop-up Id. $('. pageModal'). modal('hide'); //Using class that is defined in modal html.
This is the easiest one
You can define your modal behavior, defining data-keyboard and data-backdrop.
<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static"> On Options chapter, in the page you linked, you can see the backdrop option. Passing this option with value 'static' will prevent closing the modal.
As @PedroVagner pointed on comments, you also can pass {keyboard: false} to prevent closing the modal by pressing Esc.
If you opening the modal by js use:
$('#myModal').modal({backdrop: 'static', keyboard: false}) If you are using data attributes, use:
<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false"> Launch demo modal </button>` 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
