Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape?

Question

I'm using the Twitter Bootstrap modal as a wizard window, and would like to prevent the user from closing it when clicking outside of the modal or when pressing escape. Instead, I want it to be closed when the user presses the finish button. How could I achieve this scenario?

Already provided solution, please see the link below: http://stackoverflow.com/questions/9894339/disallow-twitter-bootstrap-modal-window-from-closing/25159755#25159755 — Sam Jha, Aug 06 '14 at 12:01

score 1090 · Accepted Answer · edited Jul 26 '22 at 06:41

1090

If using JavaScript then:

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false
})

in case of 'show'

$('#myModal').modal({backdrop: 'static', keyboard: false}, 'show');

or in HTML:

<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">

edited Jul 26 '22 at 06:41

fubo

44,811
17
103
137

answered Apr 22 '13 at 20:11

Ehsan Zargar Ershadi

24,115
17
65
95

19

When using javascript you will have to set keyboard to false to prevent closing by pressing ESC too. – Bass Jobsen Oct 08 '13 at 18:09
1

note that the tabulation is still enabled in the background – goto Feb 17 '15 at 16:15
does the html belong on the trigger? or on the modal [has the modal_id]? – Omar Nov 02 '15 at 15:19
4

I usualy use $("#myModal").modal("show"); how do i make it not to fade away while clicking outside the modal @Eshan Ershadi – Sebin P Johnson Apr 02 '16 at 16:47
6

I have added `data-backdrop="static"` to my modal's HTML, and it is working with BS 3.x. – Anriëtte Myburgh Nov 14 '16 at 09:37
it's not working with my modal. f – huykon225 Oct 06 '17 at 07:13
JS solution doesn't work, HTML solution works! – TuralAsgar Aug 21 '20 at 21:33
I am using React with Bootrap model but sorry to say, this solution does not work for me. Thanks. – Kamlesh Dec 12 '20 at 13:39
the js solution opened the modal with the page load – John Lord Jan 29 '21 at 22:06
I have tried with __ $('#myModal').modal({keyboard: false}) __ before and didn't work. But trying with this solution worked, so seems to be something funny with this component, because you need to add __ backdrop __ attribute to make it works. – Francisco M Jul 11 '22 at 08:03
3

2022 solution: ```data-bs-backdrop="static" data-bs-keyboard="false"``` – Laurie97275 Jul 22 '22 at 08:55
As @Laurie97275 said : in bootstrap 5 it worked by adding data-bs-backdrop="static" data-bs-keyboard="false" https://getbootstrap.com/docs/5.0/components/modal/#static-backdrop – Waseem Alhabash Feb 06 '23 at 12:34
Working fine for me. Good work! – Saravana Aug 25 '23 at 11:55

CesarMiguel · Answer 2 · 2014-01-07T16:07:12.287

323

Works too, data-backdrop="static" to click out and data-keyboard="false" to Esc in your div modal:

<div id="idModal" class="modal hide" data-backdrop="static" data-keyboard="false">

edited Jan 07 '14 at 16:07

answered Jan 07 '14 at 15:50

CesarMiguel

3,756
4
24
34

4

The other suggestions are correct if you need to set this programmatically/runtime, but this is the right way of doing it design-time and I think is the best way for "separation-of-concerns"-minded devs. – Dr. Gianluigi Zane Zanettini Aug 25 '15 at 08:02
2

I had two modals in a single page. At least one of them never worked right. But this solution solves it. Also it makes sense to put it in the modal div itself. – goodbytes Oct 13 '15 at 07:19
if you are thinking of using this method and the modal for multiple purposes - perhaps one of which you do want them to be able to click on background to close. Maybe better to use the '.modal({backdrop: 'static', keyboard: false})' option, when you don't want to allow - and '.modal('toggle')' when you DO want to allow. If not and you use this method - you will need to use js to allow for backdrop click close anyway – TV-C-1-5 Jul 24 '17 at 19:58

score 89 · Answer 3 · answered Apr 12 '18 at 10:11

89

You can Use Direct in bootstrap model also.

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

answered Apr 12 '18 at 10:11

Tarun..

1,029
2
9
20

score 43 · Answer 4 · edited Jul 25 '16 at 07:27

43

Just add data-backdrop="static" and data-keyboard="false" attributes to that modal.

Eg.

<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">

edited Jul 25 '16 at 07:27

Barry Michael Doyle

9,333
30
83
143

answered Jul 14 '16 at 12:37

Ganesh Putta

2,622
2
19
26

Sumit Kumar Gupta · Answer 5 · 2019-01-30T13:52:23.473

31

<button class='btn btn-danger fa fa-trash' data-toggle='modal' data-target='#deleteModal' data-backdrop='static' data-keyboard='false'></button>

simply add data-backdrop and data-keyboard attribute to your button on which model is open.

edited Jan 30 '19 at 13:52

answered Jan 13 '19 at 10:14

Sumit Kumar Gupta

2,132
1
22
21

Thanks for sharing your suggestion. I am using React with Bootstrap model but this solution does not work for me. Thank. – Kamlesh Dec 12 '20 at 13:42

score 27 · Answer 6 · edited Aug 19 '15 at 21:12

27

You can use the code below

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

to change the default behavior.

edited Aug 19 '15 at 21:12

Gyrocode.com

57,606
14
150
185

answered Aug 19 '15 at 21:06

Rafael Keller

467
4
6

In BS4 it shows that `.DEFAULTS` is "undefined". There is a `.Default` however, and doing `...Default.backdrop = 'static'` seems to work. – user9645 Dec 03 '20 at 15:04

score 24 · Answer 7 · edited Jul 26 '22 at 07:11

24

$('#modal').modal({backdrop: 'static', keyboard: false}, 'show');

edited Jul 26 '22 at 07:11

fubo

44,811
17
103
137

answered Sep 01 '16 at 06:15

Selva Balaji

425
4
11

3

Although this code may help to solve the problem, it doesn't explain _why_ and/or _how_ it answers the question. Providing this additional context would significantly improve its long-term educational value. Please [edit] your answer to add explanation, including what limitations and assumptions apply. – Toby Speight Sep 01 '16 at 17:18
30

Your answer does not work. You have to set the options before show the modal. `$('#modal').modal({backdrop: 'static', keyboard: false}, 'show');` – Paulo Borralho Martins Apr 19 '17 at 14:22

score 18 · Answer 8 · edited Oct 04 '17 at 20:08

18

I use these attributes and it works, data-keyboard="false" data-backdrop="static"

edited Oct 04 '17 at 20:08

mhatch

4,441
6
36
62

answered Oct 04 '17 at 13:04

Arsalan Ahmed Khan

436
4
9

I use don't work. please write all of tags. – mahdi marjani moghadam Dec 28 '21 at 07:37

score 15 · Answer 9 · edited Mar 06 '19 at 12:01

15

This code will prevent the modal from closing if you click outside the modal.

   $(document).ready(function () {
    $('#myModal').modal({
           backdrop: 'static',
           keyboard: false
    })
   });

edited Mar 06 '19 at 12:01

codfish555

96
1
15

answered Jan 05 '19 at 19:10

Rohit Parte

3,365
26
26

score 12 · Answer 10 · answered Oct 26 '16 at 06:14

12

<button class="btn btn-primary btn-lg" data-backdrop="static" data-keyboard="false" data-target="#myModal" data-toggle="modal">

answered Oct 26 '16 at 06:14

Ramesh kumar

518
5
8

score 9 · Answer 11 · edited Aug 15 '17 at 23:16

9

The following script worked for me:

// prevent event when the modal is about to hide
$('#myModal').on('hide.bs.modal', function (e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
});

edited Aug 15 '17 at 23:16

Naveed

11,057
2
44
63

answered Jul 12 '17 at 05:03

nim_10

477
8
21

1

And how did you close it. If you want to close after this? – Prateekro Jan 18 '18 at 09:16
Actually the modal is opened inside a browser window or in dialog like jQuery UI dialog. So if we let the modal close, the window or dialog will be empty. I know this is not the proper design, but really helpful when a feature designed as modal of site B is needed to be opened/showed inside of site A! – nim_10 Apr 05 '18 at 16:23
@Prateekro if you define the handler as a function and pass that in instead of an anonymous function you can pass that to jQuery's `unbind` function to remove a specific event handler. This way the existing `hide.bs.modal` handler will continue to work. – Bower Feb 26 '21 at 22:48

score 6 · Answer 12 · answered Jun 04 '16 at 04:56

6

If you need disable clicking outside but enable pressing escape

$('#myModal').modal({
    backdrop: 'static',   // This disable for click outside event
    keyboard: true        // This for keyboard event
})

answered Jun 04 '16 at 04:56

HoangLong85

287
4
2

score 6 · Answer 13 · answered Aug 06 '18 at 08:36

If you need to setup this after the modal is shown, you can use @Nabid solution. However, sometimes you still need to allow some method to close the modal. Assuming you have a button with class really-close-the-modal, which should really close the modal, you can use this code (jquery):

var closeButtonClicked = false;

$('.really-close-the-modal').on('click', function () {
    closeButtonClicked = true;
});

$('#myModal').on('hide.bs.modal', function (e) {
    if (!closeButtonClicked) {
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
    closeButtonClicked = false;
});

This isn't really nice code design, but it helped me in a situation where the modal was shown with a loader animation, until an ajax request returned, and only then could I know if the modal needed to be configured to prevent "implicit" closing. You can use a similar design to prevent closing the modal while it's still loading.

score 3 · Answer 14 · answered Apr 15 '19 at 08:47

3

You should use backdrop static , keyboard false. and can use close button off by using jQuery or can remove from modal html. Hope this help.

 $('#MyModal').modal({ backdrop: 'static', keyboard: false });
    $('#MyModal .close').css('display','none');

answered Apr 15 '19 at 08:47

Anurag Tiwari

103
8

$('#myModal').modal({ backdrop: 'static', keyboard: false }) – Ahsan Khan Nov 23 '21 at 06:08

score 1 · Answer 15 · edited Jul 13 '16 at 06:23

1

Your code is working when i click out side the modal, but if i use html input field inside modal-body then focus your cursor on that input then press esc key the modal has closed. Click here

edited Jul 13 '16 at 06:23

Sanoop Surendran

3,484
4
28
49

answered Jul 13 '16 at 05:15

Marudhu Raj

11
2

score 0 · Answer 16 · answered Jan 22 '17 at 07:36

<div class="modal show">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">     

    <h4 class="modal-title">Modal title</h4>
     </div>
     <div class="modal-body">
      <p>One fine body&hellip;</p>
  </div>

  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

i think this codepen can help you prevent modal close css and bootstrap

Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape?

16 Answers16

Linked