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
: 13071 At:- 8/15/2017 3:45:39 PM
html bootstrap modal-pop-up modal-dialog

5 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:- 11/23/2022 6:01:27 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

profileImage Answered by:- bhanu

You can also use "data-keyboard="false" data-backdrop="static"" in Modal Pop-up code

<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static">
   !--Modal code Here -->

data-backdrop="static" to avoid closing Pop-up when you click outside of it

data-keyboard="false" to avoid closing Pop-up when you click "Escape'

At:- 4/6/2021 12:20:30 PM

profileImage Answered by:- Vinnu

You can also do it using CSS

    pointer-events: none;

    pointer-events: all;

Note: Above Solution will turn off browser scroll.

You can make it global CSS to apply it for all Modals.

At:- 6/22/2022 3:40:00 PM Updated at:- 6/22/2022 3:41:19 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