Disable click outside of bootstrap modal area to close modal

javascript css twitter-bootstrap modal-dialog
Egghead picture Egghead · Mar 5, 2014 · Viewed 711.6k times · Source

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

Answer

Doguita picture Doguita · Mar 5, 2014

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>`

Related questions

Bootstrap modal appearing under background

I have used the code for my modal straight from the Bootstrap example, and have included only the bootstrap.js (and not bootstrap-modal.js). However, my modal is appearing underneath the grey fade (backdrop) and is non editable. Here's what …

Read More
How to hide element using Twitter Bootstrap and show it using jQuery?

Let's say I create an HTML element like this, <div id="my-div" class="hidden">Hello, TB3</div> <div id="my-div" class="hide">Hello, TB4</div> <div id="my-div" class="d-none">…

Read More
How to create a toggle button in Bootstrap

I originally created a web app in HTML, CSS and JavaScript, then was asked to create it again in Bootstrap too. I've done it all fine, but I had toggle buttons in the web app that have changed back to …

Read More