bootstrap实现嵌套模态框的实例代码
项目上有一个需求,需要在已经弹出的一个bootstrap模态框的基础上再弹一个模态框。
因为bootstrap官方不建议这么做,最后实现的过程属实不易。
以下是解决方案:
html代码:
弹出第一层模态框 × 第一层模态框
第一层模态框
项目上有一个需求,需要在已经弹出的一个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){ 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实现嵌套模态框的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。