Bootstrap3多个模态对话框无法显示的解决方案资源-CSDN文库

模态对话框

69 浏览量 2020-08-31 07:52:10 上传评论收藏 60KB PDF 举报

资源推荐

资源详情

资源评论

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

主要介绍了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>

</div>

针对这个问题，做了一些调试，发现没有任何的JS代码错误，浏览器也没有报错。

最后，仔细想了想，估计是样式套用有冲突，以前也遇到过类似的问题，解决的办法很简单，用DIV将每个dialog的代码片段

包裹一下，就能够解决这个问题了。

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

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

内容反馈

weixin_38741075

粉丝: 5
资源: 884

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip