使用ESC关闭bootstrap模式 [英] Closing bootstrap modal using ESC

问题描述

我正在使用2个模态，第一个包含一个表单，第二个在表单中发生错误时显示。第二个模态只包含带有错误信息的文本。

I am using 2 modals, 1st one contains a form and 2nd shows up when an error occurs in the form. 2nd modal contains only text with error message.

我的问题是当第二个模态出现时我按 Esc ，第一个模式（带有形式）将关闭而不是第二个。

My problem is that when 2nd modal show up and I press Esc, the first one (with the form) will close instead on the 2nd one.

有没有办法在第二个模态显示时如何聚焦？

Is there any way how to focus the 2nd modal when it shows up?

这就是它的样子，现在如果我按 Esc ，第一个将关闭，但我想先关闭第二个。

This is how it looks like, now if I pressed Esc, the 1st one would close, but I want to close the 2nd one first.

UPDATE

一旦我点击第二个模态的某个地方，它就能完美运行。我只需要自动选择/聚焦它

Once I click somewhere on the 2nd modal, it works perfectly. I just need to select/focus it automatically

推荐答案

看起来这是一个关于如何绑定keyup事件的问题。

It looks like this is an issue with how the keyup event is being bound.

您可以在模式中添加tabindex属性来解决此问题：

You can add the "tabindex"attribute to your 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>

有关详细信息，您可以查看关于github上这个问题的讨论：
https://github.com/twitter/bootstrap / issues / 4663

For more info you can view the discussion on this issue on github: https://github.com/twitter/bootstrap/issues/4663

这篇关于使用ESC关闭bootstrap模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！