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插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
JavaScript脚本库编写的方法
Dec 09 Javascript
JS操作JSON方法总结(推荐)
Jun 14 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
Vue单页应用引用单独的样式文件的两种方式
Mar 30 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 Javascript
JS内置对象和Math对象知识点详解
Apr 03 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/12/30 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
2017/07/05 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
详解Vue SPA项目优化小记
2018/07/03 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
Django自定义manage命令实例代码
2018/02/11 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
python删除某个目录文件夹的方法
2020/05/26 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
总经理职责
2013/12/22 职场文书
社区学雷锋活动策划方案
2014/01/30 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
爱心捐书倡议书
2015/04/27 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python