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

Solution 1:

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)

Solution 2:

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

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

Solution 3:

add tabindex="-1" attribute to modal div

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

</div>

Solution 4:

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