Disable click outside of bootstrap modal area to close modal

Disable click outside of bootstrap modal area to close modal

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


Solution 1:

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

Solution 2:

You can use an attribute like this: data-backdrop="static" or with javascript:

    backdrop: 'static',
    keyboard: false  // to prevent closing with Esc button (if you want this too)

See this answer too: Disallow twitter bootstrap modal window from closing

Solution 3:

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

Solution 4:

In my application, I am using the below piece of code to show Bootstrap modal via jQuery.

                        backdrop: 'static',
                        keyboard: true, 
                        show: true

Solution 5:

You can use

$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.keyboard =  false;

to change the default behavior.

Solution 6:

There are two ways to disable click outside of bootstrap model area to close modal-

  1. using javascript

       backdrop: 'static',
       keyboard: false
  2. using data attribute in HTML tag

    data-backdrop="static" data-keyboard="false" //write this attributes in that button where you click to open the modal popup.