欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2017年02月23日 11:34:03   作者：oarsman  
這篇文章主要介紹了Bootstrap3 多個模態(tài)對話框無法顯示的解決方案,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

今天幫同事調了一個代碼，他們的項目最近在用Bootstrap做開發(fā)，突然間，他遇到了一個奇怪的問題，如果一個頁面中，有多個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')"> 
    發(fā)布內容 
   </button> 
   </div> 
  </div><!-- /.modal-content --> 
</div>

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

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

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

相關文章

  • Js可拖拽放大的層拖動特效實現方法

    Js可拖拽放大的層拖動特效實現方法

    這篇文章主要介紹了Js可拖拽放大的層拖動特效實現方法,涉及javascript操作DOM元素及css樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-02-02
  • 詳談js中window.location.search的用法和作用

    詳談js中window.location.search的用法和作用

    下面小編就為大家?guī)硪黄斦刯s中window.location.search的用法和作用。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-02-02
  • javascript實現俄羅斯方塊游戲的思路和方法

    javascript實現俄羅斯方塊游戲的思路和方法

    至于俄羅斯方塊的話，有很多的難點，如果有JS去寫的話，要考慮到碰撞啊，邊界啊，下落等問題，本文這些問題大部分都有考慮到，這里給大家提供一部分思路，拋磚引玉，有需要的小伙伴可以參考下。
    2015-04-04
  • 微信小程序實現左滑刪除效果源碼

    微信小程序實現左滑刪除效果源碼

    這篇文章主要給大家介紹了關于微信小程序實現左滑刪除效果的相關資料,左滑刪除效果在app的交互方式中十分流行,比如全民應用微信,文中給出了詳細的實現代碼,需要的朋友可以參考下
    2023-08-08
  • myEvent.js javascript跨瀏覽器事件框架

    myEvent.js javascript跨瀏覽器事件框架

    IE與現代瀏覽器在DOM中最大的差異是什么無疑就是event了。各個瀏覽器接口的差異以及夠頭疼了，而IE甚至Firefox早期版本由于內存管理機制不完善，很容易在事件處理中導致內存泄漏
    2011-10-10
  • JS變量及其作用域

    JS變量及其作用域

    本文主要介紹了JS變量及其作用域的相關知識。具有很好的參考價值，下面跟著小編一起來看下吧
    2017-03-03
  • javascript實現的textarea運行框效果代碼 不用指定id批量指定

    javascript實現的textarea運行框效果代碼 不用指定id批量指定

    今天在寫一個網頁的時候用到了N多嵌套在textarea標簽里的代碼，定義雙擊運行其內的代碼段。但是每次創(chuàng)建一個這樣的可運行的實例都要給textarea元素自定義一個id值和寫入雙擊事件，好不麻煩。
    2009-12-12
  • ElementUI 的 Tree 組件的基本使用實戰(zhàn)教程

    ElementUI 的 Tree 組件的基本使用實戰(zhàn)教程

    這篇文章主要介紹了ElementUI 的 Tree 組件的基本使用實戰(zhàn)教程,本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2022-12-12
  • Three.js+React制作3D夢中海島效果

    Three.js+React制作3D夢中海島效果

    深居內陸的人們，大概每個人都有過大海之夢吧。本文使用React+Three.js技術棧，實現3D海洋和島嶼，感興趣的小伙伴可以跟隨小編一起學習一下
    2022-05-05
  • JS輸出空格的簡單實現方法

    JS輸出空格的簡單實現方法

    下面小編就為大家?guī)硪黄狫S輸出空格的簡單實現方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-09-09

最新評論