关于在bootstrap 弹出框上再弹出模态框的BUG?

最近遇到一个问题,需要在弹出框上再弹出一个模态框来。因为之前没有遇到过,所以第一反应是去百度上查一查相关资料,可惜,没有想要的答案,也没有看到有效的解决办法。

答案千奇百怪,甚至还有人问,为什么要在弹出框上再弹出一个模态框来?看到种回答总是不知道说什么好,肯定是因为需求需要,总不可能自娱自乐吧。

根据需求想要实现的效果是这样的:

bootstrap 弹出框上再弹出模态框

关于bootstrap模态框的使用有两种方法,
1、使用JS来调用$('#identifier').modal(options)
2、通过data属性,data-toggle="modal"data-target="#myModal"

项目里使用的方法,是使用JS来调用的

这里写图片描述

添加了JS方法,第一个弹窗已经可以正常弹出来了,但是,现在需要点击上面的按钮,来弹出第二个弹出层。

这里写图片描述

想要弹出第二个弹出层,想到的办法,就是,再次使用modal()方法。结果,再次弹出来的那层,被现在这个模态框挡住了,看不见。

这个问题就比较简单,设置第二个模态框的index值(z-index:1050),大于第一个模态框的值 ,我这里设置的为 z-index:1060.

这样就可以完美弹出了。

这里写图片描述

搜索之后,确定,在第一个模态框显示相应的内容。(需求需要)

这里写图片描述

但是,问题来了!!

增加了这条内容之后,弹窗的高度增加,底部的保存按钮已经不在可视范围之内,滚动条滚动的是,是body的内容,无法滚动弹窗。这样保存按钮就无法点击。。崩溃啊。。。原因?找呗!这个时候“拜雍正”,显的好尴尬。

折腾了一番之后,终于找到了原因。

当点击弹窗之后

这里写图片描述

这里写图片描述

会对body增加modal-open样式,同时,底部也会增加一个<div class="modal-backdrop fade in"></div>。因为这里两个弹出层,所以底部会有两个<div class="modal-backdrop fade in"></div>,关闭上层的弹窗,就会去掉一<div class="modal-backdrop fade in"></div>

两个弹窗都存在的时候,滚动条是可以滚动弹窗的。关闭一个之后,就无效了。

对比之后发现,对body增加modal-open样式在关闭一个弹窗之后消失了

这里写图片描述

我试着在,关闭一个弹窗1秒之后,对body增加modal-open样式。

setTimeout(function(){       
    $('body').addClass('modal-open')
},1000)

刷新之后,测试,滚动条已经可以滚动弹窗了。

这个问题就这样解决了!之后,有对第二个弹出层单独写JS弹出框,不使用模态框,也是可行的。

其实我不太清楚,对于模态框上再弹出模态框,这个问题属于一个BUG?还是我使用的方法有问题。

评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值