Bootstrap3 多個模態(tài)對話框無法顯示的解決方案

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

這篇文章主要介紹了Bootstrap3 多個模態(tài)對話框無法顯示的解決方案,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

今天幫同事調(diào)了一個代碼，他們的項目最近在用Bootstrap做開發(fā)，突然間，他遇到了一個奇怪的問題，如果一個頁面中，有多個Modal對話框的話，排列在第一個的對話框，能夠正確顯示，第二個，只能導致頁面出現(xiàn)MASK層，卻不能顯示Dialog. 如果調(diào)整順序，仍然是第一個能顯示，第二個只有頁面變暗。效果如下：

第一個，正常彈出的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')"> 
    發(fā)布內(nèi)容 
   </button> 
   </div> 
  </div><!-- /.modal-content --> 
</div>

針對這個問題，做了一些調(diào)試，發(fā)現(xiàn)沒有任何的JS代碼錯誤，瀏覽器也沒有報錯。
最后，仔細想了想，估計是樣式套用有沖突，以前也遇到過類似的問題，解決的辦法很簡單，用DIV將每個dialog的代碼片段包裹一下，就能夠解決這個問題了。

照著以前的解決辦法處理，用DIV包一下，果然問題解決，兩個dialog都能夠正確彈出。

以上所述是小編給大家介紹的Bootstrap3 多個模態(tài)對話框無法顯示的解決方案，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

Js可拖拽放大的層拖動特效實現(xiàn)方法
這篇文章主要介紹了Js可拖拽放大的層拖動特效實現(xiàn)方法,涉及javascript操作DOM元素及css樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-02-02
詳談js中window.location.search的用法和作用
下面小編就為大家?guī)硪黄斦刯s中window.location.search的用法和作用。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02
javascript實現(xiàn)俄羅斯方塊游戲的思路和方法
至于俄羅斯方塊的話，有很多的難點，如果有JS去寫的話，要考慮到碰撞啊，邊界啊，下落等問題，本文這些問題大部分都有考慮到，這里給大家提供一部分思路，拋磚引玉，有需要的小伙伴可以參考下。
2015-04-04
微信小程序?qū)崿F(xiàn)左滑刪除效果源碼
這篇文章主要給大家介紹了關于微信小程序?qū)崿F(xiàn)左滑刪除效果的相關資料,左滑刪除效果在app的交互方式中十分流行,比如全民應用微信,文中給出了詳細的實現(xiàn)代碼,需要的朋友可以參考下
2023-08-08
myEvent.js javascript跨瀏覽器事件框架
IE與現(xiàn)代瀏覽器在DOM中最大的差異是什么無疑就是event了。各個瀏覽器接口的差異以及夠頭疼了，而IE甚至Firefox早期版本由于內(nèi)存管理機制不完善，很容易在事件處理中導致內(nèi)存泄漏
2011-10-10
JS變量及其作用域
本文主要介紹了JS變量及其作用域的相關知識。具有很好的參考價值，下面跟著小編一起來看下吧
2017-03-03
javascript實現(xiàn)的textarea運行框效果代碼不用指定id批量指定
今天在寫一個網(wǎng)頁的時候用到了N多嵌套在textarea標簽里的代碼，定義雙擊運行其內(nèi)的代碼段。但是每次創(chuàng)建一個這樣的可運行的實例都要給textarea元素自定義一個id值和寫入雙擊事件，好不麻煩。
2009-12-12
ElementUI 的 Tree 組件的基本使用實戰(zhàn)教程
這篇文章主要介紹了ElementUI 的 Tree 組件的基本使用實戰(zhàn)教程,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-12-12
Three.js+React制作3D夢中海島效果
深居內(nèi)陸的人們，大概每個人都有過大海之夢吧。本文使用React+Three.js技術(shù)棧，實現(xiàn)3D海洋和島嶼，感興趣的小伙伴可以跟隨小編一起學習一下
2022-05-05
JS輸出空格的簡單實現(xiàn)方法
下面小編就為大家?guī)硪黄狫S輸出空格的簡單實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-09-09