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 相关文章推荐
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
Aug 16 Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 Javascript
浅析JavaScript函数的调用模式
Aug 10 Javascript
react-router4 嵌套路由的使用方法
Jul 24 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
Nuxt.js实战详解
Jan 18 Javascript
npm scripts 使用指南详解
Oct 08 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
Jan 18 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
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
php车辆违章查询数据示例
2016/10/14 PHP
js验证表单第二部分
2006/11/25 Javascript
jquery的Theme和Theme Switcher使用小结
2010/09/08 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
js判断上传文件类型判断FileUpload文件类型代码
2014/05/20 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
2020/05/18 Javascript
python pdb调试方法分享
2014/01/21 Python
python生成excel的实例代码
2017/11/08 Python
对pycharm 修改程序运行所需内存详解
2018/12/03 Python
Python 处理图片像素点的实例
2019/01/08 Python
pytorch构建多模型实例
2020/01/15 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
Python中logging日志记录到文件及自动分割的操作代码
2020/08/05 Python
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
印度服装购物网站:Limeroad
2018/09/26 全球购物
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
行政助理的岗位职责
2014/02/18 职场文书
教堂婚礼主持词
2014/03/14 职场文书
就业推荐表自我鉴定
2014/03/21 职场文书
个人收入证明范本
2015/06/12 职场文书