关闭第二个模式后焦点错误

Question

我正在使用 vue.js 2 和 bootsrap 3 打开一个打开第二个模式的模式。

几天前，我问了一个关于如何将焦点设置在第二个模态中包含的控件的问题。我得到了一个很好的答案，解决了这个问题。

问题 打开第一个模式时，用户可以滚动浏览它以查看其底部。但是在打开和关闭第二个模态后，焦点移动到包含第一个模态的页面。当用户滚动查看第一个模态的其余部分时，他会滚动第一个模态后面的页面。

使用起来非常不舒服，尤其是当模态大于屏幕高度时。有没有办法防止这种情况？

要重现此问题，请打开答案并单击“展开代码段”

Answer 1

这是之前答案的修改版本，在子模态关闭后将焦点设置回原始模态。

变化在这里：

$(this.$refs.submodal.$el).on("hidden.bs.modal", this.onShown)

这是添加到mounted处理程序中的。它将处理程序添加到hidden.bs.modal子模式的事件中。当组件被销毁时，它还会删除处理程序。

此外，由于关闭模态框会删除modal-open模态框打开时分配给主体的类，因此下面的代码每当onShown调用时都会将该类添加到主体中，以便父模态框的滚动不会受到影响。

$("body").addClass("modal-open")

这是一个工作示例。

$(this.$refs.submodal.$el).on("hidden.bs.modal", this.onShown)

$("body").addClass("modal-open")