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

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

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

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



关于bootstrap模态框的使用有两种方法， 

1、使用JS来调用

$('#identifier').modal(options)

 

2、通过data属性，

data-toggle="modal"

、

data-target="#myModal"

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



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



想要弹出第二个弹出层，想到的办法，就是，再次使用

modal()

方法。结果，再次弹出来的那层，被现在这个模态框挡住了，看不见。

这个问题就比较简单，设置第二个模态框的index值（

z-index:1050

），大于第一个模态框的值
，我这里设置的为 

z-index:1060

.

这样就可以完美弹出了。



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



但是，问
4000
题来了！！

增加了这条内容之后，弹窗的高度增加，底部的保存按钮已经不在可视范围之内，滚动条滚动的是，是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)

1
2
3

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

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

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