53

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?

2
  • Check this question Disallow twitter bootstrap modal window from closing
    – Zeeshan
    Mar 16, 2015 at 10:20
  • <a href="#l" data-keyboard="true" data-toggle="modal">PopUp</a> <div class='modal fade' id='popupmodal' tabindex='-1'> <div class='body'> <div>Content</div> </div> </div> Here tho things are most important - first check data-keyboard="true" AND tabindex='-1' That's it. thanks.
    – Pedram
    Jul 30, 2015 at 9:28

8 Answers 8

77

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">

0
62

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>

5
  • 1
    I tried it, but I still get the same behavior. Keyboard:false does not work for me for some reason. May 24, 2013 at 13:40
  • Can I get an example? Fiddle or such live example is enough.
    – Ravimallya
    May 27, 2013 at 11:18
  • 14
    I tried this by adding data-keyboard="false" to the modal element and it's working.
    – Hirshy
    Oct 31, 2013 at 21:35
  • 1
    Here's an updated link to the Bootstrap docs explaining those options in more detail, FWIW: v4-alpha.getbootstrap.com/components/modal/#options Sep 29, 2017 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, 2019 at 14:23
43

If your modal dialog looks like this

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

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

1
  • 21
    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, 2014 at 10:10
19

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>

1
  • The backdrop option is a nice addition to the top voted answer. Mar 30, 2020 at 16:40
10

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
});
}
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

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});

-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.

1
  • 2
    Well, i tried that, but it does not block modal from closing. May 22, 2013 at 15:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.