Bootstrap3 多个模态对话框无法显示的解决方案


Posted in Javascript onFebruary 23, 2017

今天帮同事调了一个代码,他们的项目最近在用Bootstrap做开发,突然间,他遇到了一个奇怪的问题,如果一个页面中,有多个Modal对话框的话,排列在第一个的对话框,能够正确显示,第二个,只能导致页面出现MASK层,却不能显示Dialog. 如果调整顺序,仍然是第一个能显示,第二个只有页面变暗。效果如下:

第一个,正常弹出的Dialog

Bootstrap3 多个模态对话框无法显示的解决方案

第二个无法弹出,只是页面变暗的dialog

Bootstrap3 多个模态对话框无法显示的解决方案

而两个dialog的代码是完全一致的,具体的代码如下:

<div class="modal fade" id="mediaMsgDialog" tabindex="-1" role="dialog"  
 aria-labelledby="myModalLabel" aria-hidden="true" > 
 <div class="modal-dialog"> 
  <div class="modal-content"> 
   <div class="modal-header"> 
   <button type="button" class="close"  
    data-dismiss="modal" aria-hidden="true" onclick="window.parent.closeMask()"> 
     × 
   </button> 
   <h4 class="modal-title" id="myModalLabel"> 
    选择多媒体信息 
   </h4> 
   </div> 
   <div class="modal-body" id="dlgMediaBody" style="text-align:center"> 
   <img src="../images/89.gif"> 
   </div> 
   <div class="modal-footer"> 
   <button type="button" class="btn btn-default"  
    data-dismiss="modal" onclick="window.parent.closeMask()">关闭 
   </button> 
   <button type="button" class="btn btn-primary" onclick="commitText('#menuContent')"> 
    发布内容 
   </button> 
   </div> 
  </div><!-- /.modal-content --> 
</div>

针对这个问题,做了一些调试,发现没有任何的JS代码错误,浏览器也没有报错。
最后,仔细想了想,估计是样式套用有冲突,以前也遇到过类似的问题,解决的办法很简单,用DIV将每个dialog的代码片段包裹一下,就能够解决这个问题了。

照着以前的解决办法处理,用DIV包一下,果然问题解决,两个dialog都能够正确弹出。

以上所述是小编给大家介绍的Bootstrap3 多个模态对话框无法显示的解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
另类调用flash无须激活的方法
Dec 27 Javascript
jquery select多选框的左右移动 具体实现代码
Jul 03 Javascript
jquery $.each()使用探讨
Sep 23 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
Dec 02 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
JavaScript中的Math.LOG2E属性使用详解
Jun 14 Javascript
jquery制作属于自己的select自定义样式
Nov 23 Javascript
总结javascript三元运算符知识点
Sep 28 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
Mar 04 Javascript
JavaScript array常用方法代码实例详解
Sep 02 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
Feb 23 #Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 #Javascript
jquery实现焦点轮播效果
Feb 23 #Javascript
SVG描边动画
Feb 23 #Javascript
Angular JS 生成动态二维码的方法
Feb 23 #Javascript
js实现楼层导航功能
Feb 23 #Javascript
jQuery点击头像上传并预览图片
Feb 23 #Javascript
You might like
php 静态页面中显示动态内容
2009/08/14 PHP
php常用数学函数汇总
2014/11/21 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
PHP5.0 TIDY_PARSE_FILE缓冲区溢出漏洞的解决方案
2018/10/14 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
AngularGauge 属性解析详解
2016/09/06 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
Python中的生成器和yield详细介绍
2015/01/09 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
python用match()函数爬数据方法详解
2019/07/23 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
10个Python面试常问的问题(小结)
2019/11/20 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
Python爬虫实例之2021猫眼票房字体加密反爬策略(粗略版)
2021/02/22 Python
经典C++面试题一
2016/11/06 面试题
中学生团员自我评价分享
2013/12/07 职场文书
总经理秘书工作职责
2013/12/26 职场文书
三年级科学教学反思
2014/01/29 职场文书
《云雀的心愿》教学反思
2014/02/25 职场文书
工程承诺书怎么写
2014/05/24 职场文书
学校标语口号大全
2015/12/26 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
pytorch 实现多个Dataloader同时训练
2021/05/29 Python
Go语言设计模式之结构型模式
2021/06/22 Golang
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS