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中使用Substring删除字符串最后一个字符
Nov 03 Javascript
jquery的map与get方法详解
Nov 04 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
JavaScript中switch判断容易犯错的一个细节
Aug 27 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
纯JS实现轮播图
Feb 22 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
Aug 04 Javascript
Vue渲染函数详解
Sep 15 Javascript
bootstrap table实现点击翻页功能 可记录上下页选中的行
Sep 28 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
Oct 23 Javascript
vue实现计算器功能
Feb 22 Javascript
Vue 请求传公共参数的操作
Jul 31 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
如何分别全角和半角以避免乱码
2006/10/09 PHP
PHP 和 MySQL 基础教程(二)
2006/10/09 PHP
mysql时区问题
2008/03/26 PHP
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
PHP简单实现记录网站访问量功能示例
2018/06/06 PHP
jquery的map与get方法详解
2013/11/04 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
python实现读取并显示图片的两种方法
2017/01/13 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
Python基于滑动平均思想实现缺失数据填充的方法
2019/02/21 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
django 捕获异常和日志系统过程详解
2019/07/18 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
放弃继承权公证书
2015/01/23 职场文书
HashMap实现保存两个key相同的数据
2021/06/30 Java/Android