Question

关闭模态后，我似乎无法模糊按钮。

$('#exampleModal').on('hidden.bs.modal', function(e){
        $('button').blur();
    });

我已经尝试了上述内容但它似乎仍然没有模糊它。我几乎尝试过所有事情。唯一的解决方案是设置超时并在模型完成隐藏转换后将其模糊。有更好的解决方案吗？

Answer 1

使用.one()绑定在模态插件中设置对触发器元素的关注，遗憾的是，该绑定无法解除绑定。好消息是我们可以做到这一点：

$('#myModal').on('shown.bs.modal', function(e){
    $('#myModaltrigger').one('focus', function(e){$(this).blur();});
});

其中#myModaltrigger是模态触发按钮的ID。使用.one()绑定的原因是，只有在显示模态后才会调用模糊函数。一旦它隐藏，并且焦点/模糊发生，按钮可以正常聚焦，例如通过标签对其进行聚焦，而不会自动模糊。

请参阅this working example

Answer 2

事实上，@ cvrebert就在这里，这样做会对可访问性产生负面影响。

blur（）重置焦点，因此键盘用户（有视力的键盘用户，以及更为关键的屏幕阅读器用户）都会有效地退回到页面的最开头。

只需使用键盘尝试http://jsbin.com/sukevefepo/1/：选择按钮，使用ENTER / SPACE触发，然后选择TAB到关闭按钮，ENTER / SPACE。现在，在模态关闭后，TAB ......你会看到你的焦点又回到了第一个链接上。对于除了最简单的页面以外的任何内容，这都是最重要的烦恼，并且可能会使屏幕阅读器用户感到非常迷惑。）

简而言之：当前的Bootstrap行为是正确的。一旦模态本身关闭，我理解中性模式触发器的聚焦外观的渴望......但是使用blur（）不是答案（除非你对键盘/ AT用户一点都不关心）。

一种更强大的方法，我打算研究未来版本的Bootstrap，一旦用户首次使用TAB / SHIFT + TAB（表示键盘用户）导航，就会动态设置一个类，并且抑制：否则为这些情况设定焦点样式。

Answer 3

我的解决方案适用于页面上的多个模态（基于Bootstrap modal examples）：

$('.modal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
    button.one('focus', function (event) {
        $(this).blur();
    });
});

在关闭引导程序中的模态后，如何解除模态触发按钮的聚焦

3 个答案: