bootstrap如何实现嵌套模态框

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

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

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

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

以下是解决方案：

html代码：


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

第一层模态框

弹出第二层模态框

关闭保存

$(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如何实现嵌套模态框

扫二维码与项目经理沟通

其他资讯

行业动态

企业网站建设的重要性！

服务项目

网站建设

移动端/APP

微信/小程序

技术支持

其它服务

更多服务项目

联系吧在百度地图上找到我们

电话：13518219792

bootstrap如何实现嵌套模态框

扫二维码与项目经理沟通

其他资讯

行业动态

企业网站建设的重要性！

服务项目

网站建设

移动端/APP

微信/小程序

技术支持

其它服务

更多服务项目

联系吧 在百度地图上找到我们

电话：13518219792

联系吧在百度地图上找到我们