How do you enable the escape key close functionality in a Twitter Bootstrap modal?

I followed the instructions for the Twitter Bootstrap modal on their main documentation page
and used the data-keyboard="true" syntax mentioned but the escape key does not close the modal window.
Is there something else I'm missing?

Code:

<a href="#my-modal" data-keyboard="true" data-toggle="modal">Open Modal</a>

<div class='modal fade hide' id='my-modal'>
  <div class='modal-body'>
    <div>Test</div>
  </div>
</div>

It looks like this is an issue with how the keyup event is being bound.

You can add the tabindex attribute to you modal to get around this issue:

tabindex="-1"

So your full code should look like this:

<a href="#my-modal" data-keyboard="true" data-toggle="modal">Open Modal</a>

<div class='modal fade hide' id='my-modal' tabindex='-1'>
    <div class='modal-body'>
    <div>Test</div>
    </div>
</div>

For more info you can view the discussion on this issue on github

(Updated link to new TWBS repository)

also if you're invoking via javascript , use this:

$('#myModal').modal({keyboard: true}) 

add tabindex="-1" attribute to modal div

<div id="myModal" class="modal fade" role="dialog" tabindex="-1">

</div>

In angular I am using like this:

var modalInstance = $modal.open({                        
 keyboard: false,
 backdrop: 'static',
 templateUrl: 'app/dashboard/view/currentlyIneligibleView.html',
 controller: 'currentlyIneligibleCtrl',
 resolve: {
     data: function () { return param; }
    }
});

• backdrop: 'static' => Stop to close on clicking outside
• keyboard: false => Stop to close by using escape buttton

let modals = []

        $(document).keyup(function(e) {
            if((e.key=='Escape' || e.key=='Esc' || e.keyCode==27) && modals.length) {
                $(".modal[modal='" + modals.pop() + "']").modal('hide')
            }
        })
        
        $(".modal").on("shown.bs.modal", e => {
            const id = modals.length
            modals.push(id)
            $(e.target).attr("modal", id)
        })

Bootstrap 3

In HTML, just set data-backdrop to static and data-keyboard to false

Example :

<button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch modal</button>

or

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

Live Test :##

https://jsfiddle.net/sztx8qtz/

Know More : http://budiirawan.com/prevent-bootstrap-modal-closing/