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.

thanks


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






4 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
 </button>`

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.

4
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:

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false  // to prevent closing with Esc button (if you want this too)
})
3
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.

2
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 -->
</div>

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'

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






Login/Register to answer
Or
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