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 相关文章推荐
Code: write(s,d) 输出连续字符串
Aug 19 Javascript
JS的数组的扩展实例代码
Jul 09 Javascript
javascript 一段左右两边随屏滚动的代码
Jun 18 Javascript
jQuery实现的类flash菜单效果代码
May 17 Javascript
jquery实现华丽的可折角广告代码
Sep 02 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
javascript 中Cookie读、写与删除操作
Mar 29 Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 Javascript
JavaScript实现更换背景图片
Oct 18 Javascript
Angular8 简单表单验证的实现示例
Jun 03 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中的数据传输CURL
2016/09/06 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
jQuery 渐变下拉菜单
2009/12/15 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
vue 使用外部JS与调用原生API操作示例
2019/12/02 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
Python获取网页上图片下载地址的方法
2015/03/11 Python
python使用arp欺骗伪造网关的方法
2015/04/24 Python
Windows下为Python安装Matplotlib模块
2015/11/06 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
.NET面试10题
2014/02/24 面试题
部队万能检讨书
2014/02/20 职场文书
大学老师推荐信
2014/02/25 职场文书
学习雷锋活动总结
2014/04/29 职场文书
中学生检讨书1000字
2014/10/28 职场文书
新郎新娘答谢词
2015/01/04 职场文书
微信小程序和php的登录实现
2021/04/01 PHP