Bootstrap modal dismiss if user click anywhere else..how to prevent this?

Question

I am using Twitter's Bootstrap modal.

The modal is dismissed whenever the user clicks anywhere else on the screen except the modal.

Is there a way I can prevent this, so the user has to click the Close button to dismiss the modal?

Best,

Check the docs under "options": http://twitter.github.com/bootstrap/javascript.html#modals — Wesley Murch, Nov 10 '12 at 07:01
Does this answer your question? [Disallow Twitter Bootstrap modal window from closing](https://stackoverflow.com/questions/9894339/disallow-twitter-bootstrap-modal-window-from-closing) — Sajjad, Sep 29 '20 at 10:35

score 65 · Answer 1 · answered Apr 01 '14 at 21:52

65

In most cases, the modal dialog is constructed not using Javascript, rather it's using the markup, in this scenario, just add attribute: data-backdrop="static" in the div that has class="modal fade".

Example:

  <div class="modal fade" id="myModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

answered Apr 01 '14 at 21:52

Will

1,989
20
19

22

Don't forget `data-keyboard="false"` if you want to disable close using escape key. – The Muffin Man Oct 25 '15 at 23:36
The best answer! – Federico Navarrete Jan 12 '19 at 20:01

score 54 · Accepted Answer · answered Nov 10 '12 at 06:52

54

you can pass these options:

{
  keyboard: false,
  backdrop: 'static'
}

answered Nov 10 '12 at 06:52

rahul

7,573
7
39
53

Take a look at the next answer for bootstrap 4 – jcaruso Dec 05 '18 at 21:54

Goose · Answer 3 · 2017-05-18T18:18:09.273

7

In some cases, this alternative solution may be useful.

$('#modalElement').on('hide.bs.modal', function () {
    return false;
});

edited May 18 '17 at 18:18

answered Aug 15 '16 at 15:46

Goose

4,764
5
45
84

score 1 · Answer 4 · answered Dec 01 '22 at 16:18

For new version of bootstrap at least 5.0 the correct way is:

<div class="modal fade" id="carDialog" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="carDialogLabel" aria-hidden="true">

Take a look at backdrop and keyboard it is: data-bs-backdrop and data-bs-keyboard.

Bootstrap modal dismiss if user click anywhere else..how to prevent this?

4 Answers4