bootstrap实现嵌套模态框的实例代码

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

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

以下是解决方案：

html代码：

 弹出第一层模态框
 
 

   

     

       

         ×
           
第一层模态框
       
       

       

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

   

     

       

         ×
           
第二层模态框
       
       

       

         
第二层模态框
       
       
  
       关闭
    保存
       
     
   
 
 
 

遮罩的css样式：

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实现嵌套模态框的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！