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插件 easyUI属性汇总
Jan 19 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 Javascript
vue打包使用Nginx代理解决跨域问题
Aug 27 Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 Javascript
JavaScript parseInt0.0000005打印5原理解析
Jul 23 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+MySQL的聊天室设计
2006/10/09 PHP
php 中文字符串首字母的获取函数分享
2013/11/04 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
php关联数组快速排序的方法
2015/04/17 PHP
php开发工具有哪五款
2015/11/09 PHP
PHP加密技术的简单实现
2016/09/04 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
php实现文件上传基本验证
2020/03/04 PHP
js精准的倒计时函数分享
2016/06/29 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
2016/12/15 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
详解React 16 中的异常处理
2017/07/28 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
jQuery利用FormData上传文件实现批量上传
2018/12/04 jQuery
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
python实现五子棋人机对战游戏
2020/03/25 Python
python格式化输出保留2位小数的实现方法
2019/07/02 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
python 实现控制鼠标键盘
2020/11/27 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
努比亚手机官网:nubia
2016/10/06 全球购物
工厂门卫岗位职责
2013/11/25 职场文书
测试工程师岗位职责
2013/11/28 职场文书
营销总经理的岗位职责
2013/12/15 职场文书
毕业生个人求职信范文分享
2014/01/05 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
竞选班委演讲稿
2014/04/28 职场文书
项目经理任命书
2014/06/04 职场文书
在 SQL 语句中处理 NULL 值的方法
2021/06/07 SQL Server