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 相关文章推荐
JS模拟多线程
Feb 07 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
Dec 11 Javascript
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
jquery属性过滤选择器使用示例
Jun 18 Javascript
javascript中关于&amp;&amp; 和 || 表达式的小技巧分享
Apr 10 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
JavaScript必知必会(七)js对象继承
Jun 08 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
JavaScript中this用法学习笔记
Mar 17 Javascript
Element-ui DatePicker显示周数的方法示例
Jul 19 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
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
解析strtr函数的效率问题
2013/06/26 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
js实现跨域的多种方法
2015/12/25 Javascript
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
javascript 取小数点后几位几种方法总结
2017/08/02 Javascript
AngularJS 的$timeout服务示例代码
2017/09/21 Javascript
vue中设置height:100%无效的问题及解决方法
2018/07/27 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
layui form表单提交之后重新加载数据表格的方法
2019/09/11 Javascript
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
老生常谈Python startswith()函数与endswith函数
2017/09/08 Python
python实现随机梯度下降(SGD)
2020/03/24 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
Python中os模块功能与用法详解
2020/02/26 Python
详解PyQt5信号与槽的几种高级玩法
2020/03/24 Python
在pycharm中使用matplotlib.pyplot 绘图时报错的解决
2020/06/01 Python
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
市场营销管理制度
2014/01/29 职场文书
《独坐敬亭山》教学反思
2014/04/08 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
党的群众路线教育实践活动个人对照检查材料(四风)
2014/11/05 职场文书
2014年信访工作总结
2014/11/17 职场文书
办公用房租赁协议书
2014/11/29 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server