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

更新时间：2017年02月23日 11:34:03 作者：oarsman

这篇文章主要介绍了Bootstrap3 多个模态对话框无法显示的解决方案,非常不错，具有参考借鉴价值，需要的朋友可以参考下

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

第一个，正常弹出的Dialog

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

而两个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 多个模态对话框无法显示的解决方案，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

Echarts图表移动端横屏进入退出的实现
本文主要介绍了Echarts图表移动端横屏进入退出的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
Typescript协变与逆变简单理解
深入学习TypeScript类型系统的话，逆变、协变、双向协变、不变是绕不过去的概念。这些概念看起来挺高大上的，其实并不复杂，这篇文章我们就来学习下协变和逆变吧
2022-10-10
JS数组搜索之折半搜索实现方法分析
这篇文章主要介绍了JS数组搜索之折半搜索实现方法,结合具体实例形式分析了javascript数组折半搜索算法的原理、实现技巧与相关注意事项,需要的朋友可以参考下
2017-03-03
js浮动图片的动态效果
这篇文章介绍了几种JS的动态效果实例，有需要的朋友可以参考一下
2013-07-07
JavaScript使用闭包模仿块级作用域操作示例
这篇文章主要介绍了JavaScript使用闭包模仿块级作用域操作,结合实例形式分析了javascript闭包的原理及模仿块级作用域相关操作技巧,需要的朋友可以参考下
2019-01-01
JS实现仿京东淘宝竖排二级导航
本文给大家分享一段使用原生Javascript实现的仿京东淘宝竖排二级导航的代码，非常的实用，有需要的小伙伴参考下
2014-12-12
JavaScript解八皇后问题的方法总结
在国际象棋的8*8棋盘上如何摆放8个皇后使任一皇后无法吃掉其他皇后的问题便是最初的八皇后问题,此后也被不断扩展而作为经典的算法题目,这里我们就来看一下JavaScript解八皇后问题的方法总结
2016-06-06
深入了解Hybrid App技术的相关知识
这篇文章主要介绍了深入了解Hybrid App技术的相关知识，Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具" Native App良好用户交互体验的优势 "和" Web App跨平台开发的优势 ",需要的朋友可以参考下
2019-07-07
echart自适应宽度的两种方法实例
最近工作中element后台管理使用Echarts图表,在使用过程中也遇到了些问题,下面这篇文章主要给大家介绍了关于echart自适应宽度的两种方法,需要的朋友可以参考下
2022-12-12
trackingjs+websocket+百度人脸识别API实现人脸签到
这篇文章主要介为大家详细绍了trackingjs+websocket+百度人脸识别API实现人脸签到功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11