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

Question

我按照主要文档页面上 的Twitter Bootstrap模式的说明
使用了所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

看起来这是如何绑定keyup事件的问题.

您可以将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>

有关更多信息,您可以在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>