使用ESC关闭Bootstrap模态框

Question

我使用了两个模态框，第一个包含一个表单，第二个在表单出现错误时显示。第二个模态框只包含错误信息文本。

我的问题是当第二个模态框弹出并且我按下 Esc 键时，会关闭第一个（带有表单的）而非第二个。

有没有办法在第二个模态框弹出时将焦点设置在它上面？

这就是它的样子，现在如果我按下 Esc 键，第一个模态框会关闭，但我想先关闭第二个模态框。

更新：

一旦我在第二个模态框上点击任何地方，它就能正常工作。我只需要自动选择/聚焦它。

- feri baco

---

不要打开太多的模态框，我们已经不在Windows 3.1时代了。 - moonwave99

@moonwave99 为什么不呢？ - Mosta

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>

更多信息请查看 GitHub 上关于此问题的讨论： https://github.com/twitter/bootstrap/issues/4663

- Mahmoude Elghandour

---

请将此视为您希望在可堆叠标题下查看的内容：http://jschr.github.io/bootstrap-modal/ - Mahmoude Elghandour

它在那里可以工作，但对我来说仍然无法工作，这很奇怪。 - feri baco

使用jsfiddle，只需在“External Resources”中添加twitter-bootstrap.js的CDN。 - Mahmoude Elghandour

@feri 你可能在代码中某个地方禁用了键盘，例如：$('#deleteConfirm').modal({ backdrop: 'static', keyboard: false }) .on('click', '#delete-btn', function () {}); - Pankaj Shinde

谢谢，这真的很有帮助。我尝试了许多 JavaScript 的方法，但不知道为什么它们都没有起作用，但是这个 tabindex 对我很有效。 - heySushil