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

赞 (0)

相关推荐

  • 浅析BootStrap中Modal（模态框）使用心得

    BootStrap中Modal(模态框)描述 Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的.它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能.您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件). 一.modal使用: 1.1.登录bootstrap官网,点击下载Bootstrap 1.2.导入对应的样式文件css 1.3.导入对应的js,需要导入bootstrap.js或者bootstrap.min.j

  • Bootstrap模态框调用功能实现方法

    Bootstrap模态框调用功能实现方法

    近在做一个项目时需要在页面中嵌入弹出窗口,用来展示表单信息.其实这种弹出窗口有很多jquery插件都可以实现,我这边前端都是用Bootstrap的,正好Bootstrap有模态框这个功能,这下就可以直接拿它实现了. 实现步骤如下: 在前端页面引入bootstrap相关的css和js文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.mi

  • BootStrap3中模态对话框的使用

    1.引入jQuery.min.js: 2.引入bootstrap-modal.js: 3.操作按钮:<a href="#edit" data-toggle="modal">修改</a> 4.模态框 <div class="modal fade" id="edit"> <div class="modal-dialog "> <div class="

  • 详解bootstrap的modal-remote两种加载方式【强化】

    方法一: 使用链接 <a href="demo.jsp" data-toggle="modal" data-target="#mymodal">打开</a> 当点击该连接时,demo.jsp的内容就可以动态的加载到<div class="modal-content"></div>中.当然这里的连接也可以是controller 方法二: 使用脚本 $("#myModal&

  • 基于Bootstrap模态对话框只加载一次 remote 数据的解决方法

    基于Bootstrap模态对话框只加载一次 remote 数据的解决方法

    摘要: 前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中,但是它只会加载一次,不过通过在事件中调用 removeData() 方法可以解决这个问题. 1. Bootstrap 模态对话框和简单使用 <div id="myModal" class="modal hide fade"> <div class="moda

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

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

    今天帮同事调了一个代码,他们的项目最近在用Bootstrap做开发,突然间,他遇到了一个奇怪的问题,如果一个页面中,有多个Modal对话框的话,排列在第一个的对话框,能够正确显示,第二个,只能导致页面出现MASK层,却不能显示Dialog. 如果调整顺序,仍然是第一个能显示,第二个只有页面变暗.效果如下: 第一个,正常弹出的Dialog 第二个无法弹出,只是页面变暗的dialog 而两个dialog的代码是完全一致的,具体的代码如下: <div class="modal fade"

  • Bootstrap模态对话框中显示动态内容的方法

    首先引入bootstrap的js和css,在引入对应版本的jquery: 添加按钮,点击弹出模态窗体: <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal" href="/Home/Test" rel="external nofollow" ></button> 创建模态对话框:

  • VC MFC非模态对话框的实现方法

    众所周知的,MFC中非模态对话框在显示后,程序其他窗口仍能正常运行,可以响应用户输入,还可以相互切换.本文就来给大家讲解一下非模态对话框的实现方法: 一.非模态对话框的对话框资源和对话框类 实际上,模态对话框和非模态对话框在创建对话框资源和生成对话框类上是没有区别的,因此,在创建模态对话框时所创建的IDD_TIP_DIALOG对话框资源和CTipDlg类都不需要修改. 二.创建及显示非模态对话框的步骤 需要修改的是,对话框类实例的创建和显示,也就是之前在CAdditionDlg::OnBnCli

  • javascript showModalDialog模态对话框使用说明

    javascript showModalDialog模态对话框使用说明

    1. 标准的方法 复制代码 代码如下: <script type="text/javascript"> function openWin(src, width, height, showScroll){ window.showModalDialog (src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeight:"+height+&

  • 利用javascript打开模态对话框(示例代码)

    利用javascript打开模态对话框(示例代码)

    1. 标准的方法 复制代码 代码如下: <script type="text/javascript">   function openWin(src, width, height, showScroll){   window.showModalDialog (src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeight:"+heig

  • showModalDialog模态对话框的使用详解以及浏览器兼容

    1.ModalDialog是什么?showModalDialog是jswindow对象的一个方法,和window.open一样都是打开一个新的页面.区别是:showModalDialog打开子窗口后,父窗口就不能获取焦点了(也就是无法操作了).可以在子窗口中通过设置window.returnValue的值,让父窗口可以获取这个returnvalue. 2.一个例子1)主窗口main.html,2)在主窗口中通过showModalDialog的方式打开子窗口sub.html3)在子窗口中设置ret

  • 封装的dialog插件 基于bootstrap模态对话框的简单扩展

    在使用bootstrap 模态对话框时需要在页面写对话框html,如果一个页面有许多地方需要对话框,那意味着需要写多个,感觉很麻烦,平时不太习惯bootstrap 模态对话框这种方式,所以做了个简单封装及扩展,增加了自定义标题,宽度和高度,并根据宽高居中显示. 默认属性: id:"modal",//弹窗id title:"dialog",//弹窗标题 width:"600",//弹窗宽度,暂时不支持% height:"500"

  • Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法

    What?模态对话框失效了? 上个礼拜修改测试一个后台管理项目,在测试与各个浏览器兼容性的时候,发现在chrome浏览器下showModalDialog方法显示的并不是模态对话框,就像新打开一个页面一样,父窗口仍然可以随意获取焦点,并可以打开多个窗体,而且返回值returnValue也无法返回,一直是undefined.这么多问题很令人头疼,下面就各个主流最新版的浏览器进行了一下测试. 浏览器 是否支持 状态 IE9 ○ Firefox13.0 ○ safari5.1 ○ chrome19.0

  • JS 模态对话框和非模态对话框操作技巧汇总

    模态窗口 javascript 技巧汇总(传值.打开.刷新) 1.要弹出的页面中,一定要保证<head></head>标签间有<base target="_self">,否则会弹出的模态窗口上,点击按钮时,会再次弹出一个新页面. 2.被弹出页面的按钮的事件处理中,应该有Response.Write(new Function().ClosePage());语句,用以关闭当前的模态窗口. 3.因为幽默的缓存原因,如果你在模态窗口中修改了数据,你会发现,父

随机推荐