Disable modal pop-up from closing when clicking outside it

I need a property to help users from closing the pop-up modal even if they click outside Bootstrap pop-up modal, by default it get's closed by clicking on Gray area.

So, basically I need to know, how can I prevent bootstrap pop-up modal from closing it, when clicking on Gray area or outside the main Pop-up modal.


Asked by:- neena
: 629 At:- 8/15/2017 3:45:39 PM
html bootstrap modal-pop-up modal-dialog

3 Answers
profileImage Answered by:- Vipin

You can prevent your bootstrap modal from closing when clicking on gray area when using the below HTML code for the button

<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Open Modal

here in the above code data-backdrop="static" data-keyboard="false", HTML attributes will help you to prevent closing the modal.

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.

At:- 8/16/2017 8:41:40 AM Updated at:- 8/16/2017 8:54:58 AM
above answer worked for me, thanks 0
By : neena - at :- 8/17/2017 11:01:37 AM

profileImage Answered by:- vikas_jk

If you want to make it work using jQuery, you can do something like this:

    backdrop: 'static',
    keyboard: false  // to prevent closing with Esc button (if you want this too)
At:- 8/16/2017 8:48:24 AM

profileImage Answered by:- manish

If you want to change the default behaviour of all modal pop-up, you can use below jQuery code after your document is loaded

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

Benefit of that will be to use it in your Master/Layout page below main bootstrap.js to overide it for you in all modal pop-ups use one code.

At:- 2/22/2018 3:55:54 PM

Login/Register to answer
Register directly by posting answer/details

Full Name *

Email *

By posting your answer you agree on privacy policy & terms of use

Subscribe Now

Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly