微客导航 » 文章资讯 » bootstrap实现嵌套模态框的实例代码

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

2023-08-03 07:14:03 311

项目上有一个需求，需要在已经弹出的一个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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐