如何在Twitter Bootstrap模式中启用转义键关闭功能？

Question

我按照Twitter Bootstrap modal on their main documentation page的说明进行了操作，并使用了data-keyboard="true"语法，但转义键没有关闭模态窗口。
还有别的东西我是丢失？

代码：

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

Answer 1

看起来这是关键字事件被绑定的问题。

您可以将tabindex属性添加到模态以解决此问题：

tabindex="-1"

所以你的完整代码应如下所示：

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

有关详细信息，请查看this issue on github

上的讨论

（更新了新TWBS存储库的链接）

Answer 2

如果你通过javascript调用，请使用：

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

Answer 3

将tabindex="-1"属性添加到模态div

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

</div>

Answer 4

在角度我正在使用这样：

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

• 背景：'静态'=＆gt;点击外面停止关闭
• keyboard：false =＆gt;使用escape buttton停止关闭

Answer 5

Bootstrap 3

在HTML中，只需将data-backdrop设置为静态，将data-keyboard设置为false

示例：

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

或

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

实时测试：

https://jsfiddle.net/sztx8qtz/

了解更多：http://budiirawan.com/prevent-bootstrap-modal-closing/