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

Question

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