vue项目使用bootstrap模态框叠加滚动条及蒙层解决方案

部分结构代码展示

//第一层模态框
<div class="modal fade" id="addModal1" ><div class="modal-dialog modal-sm" style="width:1286px;"><div class="modal-content"><div> 第一层模态框显示</div><button type="button">点击显示第二层模态框</button></div></div>
</div>

// 第二层模态框显示
<div class="modal fade" id="addModal2" ><div class="modal-dialog modal-sm" style="width:1286px;"><div class="modal-content"><div> 第一层模态框显示</div><button type="button">点击显示第二层模态框</button></div></div>
</div>

问题一、第二层的模态框蒙层不会覆盖掉第一层模态框
原因：
1.bootstrap官网给出明确指示不支持多个模态框同时打开
. bootstrap.css中模态框的z-index为1050
.modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1050;
display: none;
overflow: hidden;
-webkit-overflow-scrolling: touch;
outline: 0;
}
遮罩层z-index为1040
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000;
}

效果展示图片
解决问题一

<script>
//vue 钩子函数 （挂载前）mounted() {// 通过该方法来为每次弹出的模态框设置最新的zIndex值，从而使最新的modal显示在最前面$(document).on('show.bs.modal', '.modal', function (event) {let zIndex = 1040 + (10 * $('.modal:visible').length);$(this).css('z-index', zIndex);setTimeout(function() {$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');}, 0);});}</script>

问题二、当第二层模态框消失后，第一层的模态框滚动条失效。当高度超出窗口不能跟着滚动。
原因
监测html发现，当打开模态框时，会给 body 元素加一个 modal-open 的 class，而在 bootstrap.css 中，有这样一条 css 规则：
.modal-open .modal {overflow-x:hidden; overflow-y:auto}
因为有 overflow-y:auto，所以模态框才可以滚动，而当关闭任何一个模态框时，body 元素的 css 规则 modal-open 会被移除掉，自然 overflow-y:auto 也就没有了，所以模态框的滚动条就消失了。

解决方案1：
在第一层的模态框上添加 style=“overflow: auto” 可以实现当第二层模态框消失之后第一层模态框滚动条正常。

<div class="modal fade" ... style="overflow: auto">

带来的问题（我试了一下可以用，但是可能会出现两个滚动条同时存在的问题）

解决方案2：

<script>//vue 钩子函数 （挂载前）mounted() {// hidden.bs.modal的意思就是当弹出的模态框消失的时候，接下来回调的函数$('#addModal2').on('hidden.bs.modal', function() {//当第二个模态框消失的时候给body添加一个modal-open （亲测有效）$("body").addClass("modal-open");});}</script>

综合解决蒙层问题和滚动条问题

<script>mounted() {// 通过该方法来为每次弹出的模态框设置最新的zIndex值，从而使最新的modal显示在最前面$(document).on('show.bs.modal', '.modal', function (event) {//bootstrap  蒙层的 问题let zIndex = 1040 + (10 * $('.modal:visible').length);$(this).css('z-index', zIndex);setTimeout(function() {$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');}, 0);// $('#configModal').modal('hide');$('#configModal').on('hidden.bs.modal', function() {$("body").addClass("modal-open");});});}
</script>

最终效果图展示

vue项目使用bootstrap模态框叠加滚动条及蒙层解决方案相关推荐

Bootstrap模态框显示时有阴影遮罩层
如下图所示: 有遮罩层在,无法进行任何操作,只需修改默认 z-index 属性即可: .modal-backdrop{z-index:0;}
bootstrap模态框弹出居中显示
在项目中,有几个使用bootstrap模态框弹出问题,在单页面上是居中显示,但是嵌套在别的iframe中,弹出的位置在靠近顶部的位置. 查阅了一些资料,有几种解决方案,1修改bootstrap的js文 ...
Bootstrap警告框、弹出提示层、模态框的js插件效果总结
Bootstrap警告框js插件经常会在bootstrap项目中遇到警告框.弹出提示层.弹出模态框组件等等场景应用. 使用前准备: 插件使用之前,请先导入如下文件: jquery.min.js bo ...
Bootstrap 模态框（Modal）
#Bootstrap 模态框(Modal)插件详细讲解 #####第一步: 加载框架: https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jque ...
html拖拽模态框,bootstrap模态框实现拖拽效果
本文实例为大家分享了bootstrap模态框实现拖拽效果,供大家参考,具体内容如下项目中用的有点乱,jquery和angularjs一起搞,有些插件用的jquery版本的,有的插件用的ng版本的.搞 ...
Bootstrap模态框使用WebUploader点击失效问题解决
Bootstrap模态框使用WebUploader点击失效问题解决参考文章: (1)Bootstrap模态框使用WebUploader点击失效问题解决 (2)https://www.cnblogs. ...
bootstrap 模态框满屏_如何设置Bootstrap模态框modal的高度和宽度?
以下图片是Bootstrap4模态框默认大小,一般情况Bootstrap模态框有两个默认大小,一个是"modal-sm" 小模态框,一个是"modal-lg"大 ...
bootstrap 模态框满屏_解决Ueditor在bootstarp 模态框中全屏问题
基本的一些配置就不说了.先说一下要注意的问题:首先是zIndex的设置.记住最好都显示设置模态框和ueditor的zIndex.理清他们的层叠关系. 特别是用到ueditor里面的图片上传功能的更要设 ...
前端之bootstrap模态框
简介:模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. Modal简介 Modal实现弹出表单 M ...

vue项目使用bootstrap模态框叠加滚动条及蒙层解决方案

vue项目使用bootstrap模态框叠加滚动条及蒙层解决方案相关推荐

最新文章

热门文章