打开两个嵌套模态时Bootstrap Modal对话框的焦点丢失答案

【问题标题】：Focus of Bootstrap Modal dialog when opening two nested modal lost打开两个嵌套模态时Bootstrap Modal对话框的焦点丢失
【发布时间】：2018-12-14 15:56:42
【问题描述】：

我有两个以嵌套方式打开的模式。 ESCAPE 键盘仅在关闭第二个对话框时起作用。除非我再次单击该对话框以重新获得焦点，否则第一个对话框不会通过键盘关闭。我正在尝试将模态的焦点恢复到第一个对话框。因此用户可以连续执行 [ESCAPE] - [ESCAPE] 键来关闭这两个对话框。两者都有 tabindex="-1"。

在主 js 文件中调用了第一个对话框。

$('#firstDialog').modal({
    cache: false,
    backdrop: 'static'
}, 'show');

第二个对话框在第一个对话框的按钮事件中被调用

$('#secondDialog').modal({
    cache: false,
    backdrop: 'static'
}, 'show');

我尝试了以下方法，在关闭第二个对话框时手动设置 activeElement。它似乎不起作用。

$('#secondDialog').on('hidden.bs.modal', function(){
    document.activeElement = $('#firstDialog')[0];
});

我在以下线程中提到了有关设置 activeElement 的解决方案。任何想法引导程序需要关注什么对象才能自动返回？ https://github.com/twbs/bootstrap/issues/4854

【问题讨论】：

标签： javascript twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

在提出问题后的几分钟内找出答案。无论如何，如果其他人有比这更好的解决方案，请给我一个建议。我的想法是它应该默认工作。

$('#secondDialog').on('hidden.bs.modal', function(){
    $('#firstDialog').focus();
});

【讨论】：