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
: 791 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
 </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.

3
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)
})
2
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.

1
At:- 2/22/2018 3:55:54 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