Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Disallow Twitter Bootstrap modal window from closing

I am creating a modal window using Twitter Bootstrap. The default behavior is if you click outside the modal area, the modal will automatically close. I would like to disable that -- i.e. not close the modal window when clicking outside the modal.

Can someone share jQuery code to do this?

like image 950
user1296175 Avatar asked Mar 27 '12 17:03

user1296175


People also ask

How do I stop a Bootstrap modal from closing?

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.

How do you stop a modal from closing?

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.

How do I hide the modal when I click 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 .


2 Answers

I believe you want to set the backdrop value to static. If you want to avoid the window to close when using the Esc key, you have to set another value.

Example:

<a data-controls-modal="your_div_id"
   data-backdrop="static"
   data-keyboard="false"
   href="#">

OR if you are using JavaScript:

$('#myModal').modal({
  backdrop: 'static',
  keyboard: false
});
like image 104
Nobita Avatar answered Oct 13 '22 02:10

Nobita


Just set the backdrop property to 'static'.

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

You may also want to set the keyboard property to false because that prevents the modal from being closed by pressing the Esc key on the keyboard.

$('#myModal').modal({
  backdrop: 'static',
  keyboard: false
})

myModal is the ID of the div that contains your modal content.

like image 31
Nirmal Avatar answered Oct 13 '22 03:10

Nirmal