脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap3 模态对话框

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

您可能感兴趣的文章:

相关文章

  • 工作中常用到的ES6语法

    工作中常用到的ES6语法

    ECMAScript 6是JavaScript语言的下一代标准，已经在2015年6月正式发布了。这篇文章主要介绍了工作中常用到的ES6语法,需要的朋友可以参考下
    2018-09-09
  • 浅谈es6 javascript的map数据结构

    浅谈es6 javascript的map数据结构

    本篇文章主要介绍了浅谈es6 javascript的map数据结构，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 基于javascript实现全屏漂浮广告

    基于javascript实现全屏漂浮广告

    这篇文章主要介绍了基于javascript实现全屏漂浮广告，光标悬浮广告停止移动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • JavaScript高级程序设计（第三版）学习笔记6、7章

    JavaScript高级程序设计（第三版）学习笔记6、7章

    这篇文章主要介绍了JavaScript高级程序设计（第三版）学习笔记6、7章 的相关资料,需要的朋友可以参考下
    2016-03-03
  • js两个数组合并去重的方法大全

    js两个数组合并去重的方法大全

    这篇文章主要给大家介绍了关于js两个数组合并去重的相关资料,日常开发中经常会用到的JS数组去重,文中将每种方法都给出了代码示例,需要的朋友可以参考下
    2023-09-09
  • JSON字符串和JSON对象相互转化实例详解

    JSON字符串和JSON对象相互转化实例详解

    这篇文章主要介绍了JSON字符串和JSON对象相互转化方法,结合实例形式详细分析了json对象与字符串的功能、使用、转换方法及相关注意事项,需要的朋友可以参考下
    2017-01-01
  • JS实现留言板功能

    JS实现留言板功能

    这篇文章主要为大家详细介绍了JS实现留言板功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 基于原生JS封装的Modal对话框插件的示例代码

    基于原生JS封装的Modal对话框插件的示例代码

    这篇文章主要介绍了基于原生JS封装的Modal对话框插件的示例代码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-09-09
  • 小程序中手机号识别的示例

    小程序中手机号识别的示例

    这篇文章主要介绍了小程序中手机号识别的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 微信小程序 生成携带参数的二维码

    微信小程序 生成携带参数的二维码

    这篇文章主要介绍了微信小程序 生成携带参数的二维码,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值
    2019-10-10

最新评论