bootstrap如何实现嵌套模态框

这篇文章主要介绍bootstrap如何实现嵌套模态框，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

项目上有一个需求，需要在已经弹出的一个bootstrap模态框的基础上再弹一个模态框。

因为bootstrap官方不建议这么做，最后实现的过程属实不易。

以下是解决方案：

html代码：

<divid="container">
<adata-toggle="modal"href="#myModal"rel="externalnofollow"class="btnbtn-primary">弹出第一层模态框</a>
<!--第一层模态框-->
<divclass="modalfade"id="myModal">
<divclass="modal-dialogmodal-lg">
<divclass="modal-content">
<divclass="modal-header">
<buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">×</button>
<h5class="modal-title">第一层模态框</h5>
</div>
<divclass="container"></div>
<divclass="modal-body">
<p>第一层模态框</p>
<br>
<adata-toggle="modal"href="#myModal2"rel="externalnofollow"class="btnbtn-primary">弹出第二层模态框</a>
</div>
<divclass="modal-footer"><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"data-dismiss="modal"class="btn">关闭</a>
<ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"class="btnbtn-primary">保存</a>
</div>
</div>
</div>
</div>
<!--第二层模态框-->
<divclass="modalfaderotate"id="myModal2">
<divclass="modal-dialog">
<divclass="modal-content">
<divclass="modal-header">
<buttontype="button"class="close"data-dismiss="modal"aria-hidden="true">×</button>
<h5class="modal-title">第二层模态框</h5>
</div>
<divclass="container"></div>
<divclass="modal-body">
<p>第二层模态框</p>
</div>
<divclass="modal-footer">
<ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"data-dismiss="modal"class="btn">关闭</a>
<ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"class="btnbtn-primary">保存</a>
</div>
</div>
</div>
</div>
<!--遮罩-->
<divid="cover"></div>
</div>

遮罩的css样式：

<styletype="text/css">
<!--遮罩是为了第二层模态框弹出时，可以将第一层模态框遮住-->
#cover{
display:none;
position:fixed;
background:#000000;
left:0;
top:0;
width:100%;
height:100%;
opacity:0.40;
z-index:1
}
</style>

js代码：

$(document).ready(function(){
//第二层模态框弹出时，为其设置一个大于第一层模态框的z-index
//使得第二层模态框可以在第一层模态框上面
$(document).on('show.bs.modal','#myModal2',function(event){
varzIndex=1040+(10*$('.modal:visible').length+1);
$(this).css('z-index',zIndex);
//开启遮罩，遮罩的高度小于第二层模态框
$("#cover").css('z-index',zIndex-1)
$('#cover').css('display','block');//显示遮罩层
});

$('#myModal2').on('hide.bs.modal',function(){
//第二层模态框关闭时，关闭遮罩
$('#cover').css('display','none');
});
});

以上是“bootstrap如何实现嵌套模态框”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注恰卡编程网行业资讯频道！