我正在使用 vue.js 2 和 bootsrap 3 打开一个模式,该模式会打开第二个模式。
几天前,我问了一个关于如何将焦点设置在第二模式中包含的控件上的问题。我得到了一个很好的答案,解决了这个问题。
问题 打开第一个模式时,用户可以滚动它以查看其底部。但是打开和关闭第二个模式后,焦点将移动到包含第一个模式的页面。当用户滚动查看第一个模式的其余部分时,他会滚动第一个模式后面的页面。
使用起来非常不舒服,尤其是当模态框大于屏幕高度时。有没有办法防止这种情况发生?
要重现此问题,请打开 answer 并单击“展开代码片段”
这对我有用:
$('#my-modal').on('hidden.bs.modal', function () {
$('body').addClass('modal-open');
});
这是之前答案的修改版本,在子模态关闭后将焦点设置回原始模态。
变化就在这里:
$(this.$refs.submodal.$el).on("hidden.bs.modal", this.onShown)
这是添加到
mounted
处理程序中的。它将处理程序添加到子模态的 hidden.bs.modal
事件。当组件被销毁时,它还会删除处理程序。
此外,由于关闭模态框会删除模态框打开时分配给主体的
modal-open
类,因此每当调用 onShown
时,下面的代码都会将该类添加到主体中,以便父模态框的滚动不会受到影响.
$("body").addClass("modal-open")
这是一个工作示例。
console.clear()
Vue.component("sub-modal", {
template: "#submodal",
methods: {
show() {
$(this.$el).modal("show")
},
onShown(event) {
console.log("submodal onshown")
this.$refs.input.focus()
}
},
mounted() {
$(this.$el).on("shown.bs.modal", this.onShown)
},
beforeDestroy() {
$(this.$el).off("shown.bs.modal", this.onShown)
}
})
Vue.component("modal", {
template: "#modal",
methods: {
show() {
$(this.$refs.modal).modal("show")
},
showSubModal() {
this.$refs.submodal.show()
},
onShown(event) {
console.log("parent")
this.$refs.input.focus()
// Add the "modal-open" class back to the body in case
// it was removed by the sub modal
$("body").addClass("modal-open")
}
},
mounted() {
$(this.$refs.modal).on("shown.bs.modal", this.onShown)
$(this.$refs.submodal.$el).on("hidden.bs.modal", this.onShown)
},
beforeDestroy() {
$(this.$refs.modal).off("shown.bs.modal", this.onShown)
$(this.$refs.submodal.$el).on("hidden.bs.modal", this.onShown)
}
})
new Vue({
el: "#app",
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="app">
<modal ref="modal"></modal>
<button @click="$refs.modal.show()" class="btn">Show Modal</button>
</div>
<template id="submodal">
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<input ref="input" type="text" class="form-control">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</template>
<template id="modal">
<div>
<div ref="modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body" style="height: 80vh">
Stuff
<input ref="input" type="text" class="form-control">
</div>
<div class="modal-footer">
<button @click="showSubModal" type="button" class="btn btn-primary">Show Sub Modal</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<sub-modal ref="submodal"></sub-modal>
</div>
</template>
添加模态打开并不能解决“通过选项卡将焦点移出模态”的问题。经过几个小时的研究,只有一件事对我有用,这是最简单的方法:在显示第二个模态之前隐藏第一个模态,并在隐藏第一个模态之后显示第二个模态。
$('#modal1').on('show.bs.modal', function () {
$('#modal2').modal("hide");
})
$('#modal2').on('hide.bs.modal', function () {
$('#modal1').modal("show");
})