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


Posted in Javascript onJanuary 10, 2020

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

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

以下是解决方案:

html代码:

<div id="container">
 <a data-toggle="modal" href="#myModal" rel="external nofollow" class="btn btn-primary">弹出第一层模态框</a>
 <!-- 第一层模态框 -->
 <div class="modal fade" id="myModal">
   <div class="modal-dialog modal-lg">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
           <h4 class="modal-title">第一层模态框</h4>
       </div>
       <div class="container"></div>
       <div class="modal-body">
       <p>第一层模态框</p>
       <br> 
       <a data-toggle="modal" href="#myModal2" rel="external nofollow" class="btn btn-primary">弹出第二层模态框</a>
       </div>
       <div class="modal-footer">  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-dismiss="modal" class="btn">关闭</a>
         <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary">保存</a>
       </div>
     </div>
   </div>
 </div>
 <!-- 第二层模态框 -->
 <div class="modal fade rotate" id="myModal2">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
           <h4 class="modal-title">第二层模态框</h4>
       </div>
       <div class="container"></div>
       <div class="modal-body">
         <p>第二层模态框</p>
       </div>
       <div class="modal-footer">  
       <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-dismiss="modal" class="btn">关闭</a>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-primary">保存</a>
       </div>
     </div>
   </div>
 </div>
 <!-- 遮罩 -->
 <div id="cover"></div>
</div>

遮罩的css样式:

<style type="text/css">
 <!-- 遮罩是为了第二层模态框弹出时,可以将第一层模态框遮住 -->
 #cover {
 display: none;
 position: fixed;
 background: #000000;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 opacity: 0.40;
 z-index: 1
}
</style>

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

Javascript 相关文章推荐
Prototype使用指南之selector.js
Jan 10 Javascript
JavaScript 实现??打印?理
Apr 28 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
javascript中offset、client、scroll的属性总结
Aug 13 Javascript
js实现网页多级级联菜单代码
Aug 20 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
bootstrap table使用入门基本用法
May 24 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 jQuery
vue中,在本地缓存中读写数据的方法
Sep 21 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 Javascript
Node.js 中判断一个文件是否存在
Aug 24 Javascript
jQuery操作动画完整实例分析
Jan 10 #jQuery
基于JavaScript判断两个对象内容是否相等
Jan 10 #Javascript
jQuery操作事件完整实例分析
Jan 10 #jQuery
jQuery操作元素追加内容示例
Jan 10 #jQuery
基于JS判断对象是否是数组
Jan 10 #Javascript
JS数组属性去重并校验重复数据
Jan 10 #Javascript
JS图片懒加载的优点及实现原理
Jan 10 #Javascript
You might like
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
jQuery Selector选择器小结
2010/05/06 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
JS增加行复制行删除行的实现代码
2013/11/09 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
原生js配合cookie制作保存路径的拖拽
2015/12/29 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
vue.js路由跳转详解
2017/08/28 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
[50:28]LGD女子学院第三期 DOTA2复仇之魂教学
2013/12/24 DOTA
用PyQt进行Python图形界面的程序的开发的入门指引
2015/04/14 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
Python time库基本使用方法分析
2019/12/13 Python
python3中sys.argv的实例用法
2020/04/24 Python
python和c语言哪个更适合初学者
2020/06/22 Python
美国大码时尚女装购物网站:ELOQUII
2017/12/28 全球购物
家长通知书家长评语
2014/04/17 职场文书
宣传工作经验材料
2014/06/02 职场文书
教师批评与自我批评
2014/10/15 职场文书
干部作风建设工作总结
2014/10/29 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
食品安全责任书范本
2015/05/09 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang