如何在 Twitter Bootstrap 模式中启用转义键关闭功能? [英] How do you enable the escape key close functionality in a Twitter Bootstrap modal?

问题描述

我按照其主要文档页面上的 Twitter Bootstrap 模式
和使用了提到的 data-keyboard="true" 语法，但转义键不会关闭模式窗口.
还有什么我遗漏的吗?

代码:

<a href="#my-modal" data-keyboard="true" data-toggle="modal">打开 Modal</a><div class='modal 淡入淡出隐藏' id='my-modal'>
<div>测试</div>

解决方案

看起来这是 keyup 事件绑定方式的问题.

您可以向模态添加 tabindex 属性来解决此问题:

tabindex="-1"

所以你的完整代码应该是这样的:

<a href="#my-modal" data-keyboard="true" data-toggle="modal">打开 Modal</a><div class='modalfade hide' id='my-modal' tabindex='-1'>
<div>测试</div>

有关更多信息，您可以查看关于此问题在 github 上的讨论

(更新了指向新 TWBS 存储库的链接)

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)

这篇关于如何在 Twitter Bootstrap 模式中启用转义键关闭功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！