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 相关文章推荐
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
jQuery动态增减行的实例代码解析(推荐)
Dec 05 Javascript
Axios学习笔记之使用方法教程
Jul 21 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 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载入页面时编码的方法
2014/07/29 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
JavaScript中也使用$美元符号来代替document.getElementById
2010/06/19 Javascript
Ext 今日学习总结
2010/09/19 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
javascript先序遍历DOM树的方法
2016/02/27 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
将string类型的数据类型转换为spark rdd时报错的解决方法
2019/02/18 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
opencv 阈值分割的具体使用
2020/07/08 Python
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
美国著名的团购网站:Woot
2016/08/02 全球购物
英国珠宝和手表专家:Pleasance & Harper
2020/10/21 全球购物
yy结婚证婚词
2014/01/10 职场文书
财务主管自我鉴定
2014/01/17 职场文书
代理班主任的自我评价
2014/02/04 职场文书
公司联欢晚会主持词
2014/03/22 职场文书
四年级小学生评语
2014/12/26 职场文书
五年级小学生评语
2014/12/26 职场文书
校本课程教学计划
2015/01/19 职场文书
转学证明范本
2015/06/19 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
i7 6700处理器相当于i5几代
2022/04/19 数码科技