How to disable Escape Key for Twitter Bootstrap Modals?

Question

In a shown modal there is a form. If I focus on an input field (any field for that matter) and press ESC key, that modal is hidden. However, if I don't focus on a form field, then pressing ESC key does not close the modal. What's going on?

I want to disable ESC key functionality for the modals altogether. I tried this:

$(document).on('keypress', function(e) {
  if(e.keyCode == 27) {
    e.preventDefault();
    return false;
  }
}

But this does not affect anything. Is there a way to completely disable ESC key for modals?

Check this question [Disallow twitter bootstrap modal window from closing](http://stackoverflow.com/questions/9894339/disallow-twitter-bootstrap-modal-window-from-closing) — Zeeshan, Mar 16 '15 at 10:20
PopUp

Content

Here tho things are most important - first check data-keyboard="true" AND tabindex='-1' That's it. thanks. — Pedram, Jul 30 '15 at 09:28

score 76 · Answer 1 · answered May 14 '15 at 17:14

76

By adding data-keyboard="false" fixes the problem.

Something like this: <div class="modal hide fade" data-keyboard="false" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

answered May 14 '15 at 17:14

ptCoder

2,229
3
24
38

score 62 · Answer 2 · edited Jun 05 '19 at 04:10

Twitter's Bootstrap modal.js (see http://getbootstrap.com/2.3.2/javascript.html#modals) itself has keyboard true or false Boolean. You can avoid escape keypress and click outside the modal using following script:

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

working demo :

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

 <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

        <title>Hello, world!</title>
      </head>
      <body>
       
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
      </body>
      
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
      Launch demo modal
    </button>

      <div class="modal" id="exampleModal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>Modal body text goes here.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

I tried it, but I still get the same behavior. Keyboard:false does not work for me for some reason. — user1863635, May 24 '13 at 13:40
Can I get an example? Fiddle or such live example is enough. — Ravimallya, May 27 '13 at 11:18
I tried this by adding `data-keyboard="false"` to the modal element and it's working. — Hirshy, Oct 31 '13 at 21:35
Here's an updated link to the Bootstrap docs explaining those options in more detail, FWIW: https://v4-alpha.getbootstrap.com/components/modal/#options — Mohamed Moustafa, Sep 29 '17 at 14:36
For anyone (using BS 3.3.x, but possibly other versions too): it seems changing `keyboard:false` when the modal is already shown has no effect. This setting get evaluated when the modal gets opened. — robsch, Apr 30 '19 at 14:23

score 41 · Answer 3 · answered Jul 26 '13 at 18:39

41

If your modal dialog looks like this

<div id="myModal" class="modal hide fade" tabindex="-1" ...>
   ....
</div>

Removing tabindex="-1" should disable Escape key.

answered Jul 26 '13 at 18:39

detale

12,482
4
41
42

20

Removing the tabindex attribute does disable the Escape key, but only if the modal doesn't have an input field inside it. When an input field is present and you focus on it, hitting escape will cause the modal to close. – Ab_c Oct 25 '14 at 10:10

score 19 · Answer 4 · edited Jun 05 '19 at 04:01

you need data-keyboard="false" and data-backdrop="static"

working demo :

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
   
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
  
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>


  <div class="modal" id="exampleModal" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


</html>

The backdrop option is a nice addition to the top voted answer. — Gustavo Straube, Mar 30 '20 at 16:40

score 10 · Answer 5 · answered Aug 31 '17 at 06:17

Set the keyboard value to false!

Example:

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

OR if you are using JavaScript:

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

score 2 · Answer 6 · answered Jan 09 '23 at 14:35

2

With Bootstrap 5 you would need to add:

data-bs-backdrop="static" data-bs-keyboard="false"

see https://getbootstrap.com/docs/5.0/components/modal/#static-backdrop

answered Jan 09 '23 at 14:35

hleg

31
2

score 1 · Answer 7 · answered Oct 28 '18 at 20:32

1


> keyboard: true

 Closes the modal when escape key is pressed.

> keyboard: false

 Prevent closing the modal when escape key is pressed

Demo JQuery Code

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

answered Oct 28 '18 at 20:32

Anupam M

11
6

score -5 · Answer 8 · answered May 22 '13 at 14:55

-5

You can target that specific input by adding an ID to it and simply removing the keydown event for enter like so:

JS

$(document).ready(function() {
  $('form input').keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

This example works with the Enter Key.

answered May 22 '13 at 14:55

Hidden

3,598
4
34
57

2

Well, i tried that, but it does not block modal from closing. – user1863635 May 22 '13 at 15:15

How to disable Escape Key for Twitter Bootstrap Modals?

8 Answers8

Linked