平武建站

bootstrap如何实现嵌套模态框

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

成都创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于成都网站建设、做网站、马鞍山网络推广、重庆小程序开发、马鞍山网络营销、马鞍山企业策划、马鞍山品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；成都创新互联公司为所有大学生创业者提供马鞍山建站搭建服务，24小时服务热线：18982081108，官方网址：www.cdcxhl.com

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

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

以下是解决方案：

html代码：


 弹出第一层模态框
 
 
   
     
       
         ×
           第一层模态框
       
       
               

第一层模态框

       
         弹出第二层模态框        
         关闭          保存        
                                           ×            第二层模态框                                  

第二层模态框

                         关闭     保存                        

遮罩的css样式：


 
 #cover {
 display: none;
 position: fixed;
 background: #000000;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 opacity: 0.40;
 z-index: 1
}

js代码：

$(document).ready(function (){
 //第二层模态框弹出时，为其设置一个大于第一层模态框的z-index
 //使得第二层模态框可以在第一层模态框上面
 $(document).on('show.bs.modal', '#myModal2', function (event) {
 var zIndex = 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如何实现嵌套模态框”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


网站标题：bootstrap如何实现嵌套模态框
当前网址：http://pwwzsj.com/article/jgssdo.html

其他资讯