Bootstrap3 多個(gè)模態(tài)對(duì)話框無法顯示的解決方案
今天幫同事調(diào)了一個(gè)代碼，他們的項(xiàng)目最近在用Bootstrap做開發(fā)，突然間，他遇到了一個(gè)奇怪的問題，如果一個(gè)頁(yè)面中，有多個(gè)Modal對(duì)話框的話，排列在第一個(gè)的對(duì)話框，能夠正確顯示，第二個(gè)，只能導(dǎo)致頁(yè)面出現(xiàn)MASK層，卻不能顯示Dialog. 如果調(diào)整順序，仍然是第一個(gè)能顯示，第二個(gè)只有頁(yè)面變暗。效果如下：
第一個(gè)，正常彈出的Dialog
第二個(gè)無法彈出，只是頁(yè)面變暗的dialog
而兩個(gè)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()">關(guān)閉
</button>
<button type="button" class="btn btn-primary" onclick="commitText('#menuContent')">
發(fā)布內(nèi)容
</button>
</div>
</div><!-- /.modal-content -->
</div>
針對(duì)這個(gè)問題，做了一些調(diào)試，發(fā)現(xiàn)沒有任何的JS代碼錯(cuò)誤，瀏覽器也沒有報(bào)錯(cuò)。
最后，仔細(xì)想了想，估計(jì)是樣式套用有沖突，以前也遇到過類似的問題，解決的辦法很簡(jiǎn)單，用DIV將每個(gè)dialog的代碼片段包裹一下，就能夠解決這個(gè)問題了。
照著以前的解決辦法處理，用DIV包一下，果然問題解決，兩個(gè)dialog都能夠正確彈出。
以上所述是小編給大家介紹的Bootstrap3 多個(gè)模態(tài)對(duì)話框無法顯示的解決方案，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- 封裝的dialog插件 基于bootstrap模態(tài)對(duì)話框的簡(jiǎn)單擴(kuò)展
- Bootstrap 模態(tài)對(duì)話框只加載一次 remote 數(shù)據(jù)的完美解決辦法
- Bootstrap模態(tài)對(duì)話框的簡(jiǎn)單使用
- BootStrap3中模態(tài)對(duì)話框的使用
- Bootstrap基本插件學(xué)習(xí)筆記之模態(tài)對(duì)話框(16)
- 基于Bootstrap模態(tài)對(duì)話框只加載一次 remote 數(shù)據(jù)的解決方法
- Bootstrap模態(tài)對(duì)話框中顯示動(dòng)態(tài)內(nèi)容的方法
- Bootstrap模態(tài)對(duì)話框用法簡(jiǎn)單示例
相關(guān)文章
Js可拖拽放大的層拖動(dòng)特效實(shí)現(xiàn)方法
這篇文章主要介紹了Js可拖拽放大的層拖動(dòng)特效實(shí)現(xiàn)方法,涉及javascript操作DOM元素及css樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
詳談js中window.location.search的用法和作用
下面小編就為大家?guī)硪黄斦刯s中window.location.search的用法和作用。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
javascript實(shí)現(xiàn)俄羅斯方塊游戲的思路和方法
至于俄羅斯方塊的話，有很多的難點(diǎn)，如果有JS去寫的話，要考慮到碰撞啊，邊界啊，下落等問題，本文這些問題大部分都有考慮到，這里給大家提供一部分思路，拋磚引玉，有需要的小伙伴可以參考下。2015-04-04
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)左滑刪除效果的相關(guān)資料,左滑刪除效果在app的交互方式中十分流行,比如全民應(yīng)用微信,文中給出了詳細(xì)的實(shí)現(xiàn)代碼,需要的朋友可以參考下2023-08-08
IE與現(xiàn)代瀏覽器在DOM中最大的差異是什么無疑就是event了。各個(gè)瀏覽器接口的差異以及夠頭疼了，而IE甚至Firefox早期版本由于內(nèi)存管理機(jī)制不完善，很容易在事件處理中導(dǎo)致內(nèi)存泄漏2011-10-10
本文主要介紹了JS變量及其作用域的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03
javascript實(shí)現(xiàn)的textarea運(yùn)行框效果代碼 不用指定id批量指定
今天在寫一個(gè)網(wǎng)頁(yè)的時(shí)候用到了N多嵌套在textarea標(biāo)簽里的代碼，定義雙擊運(yùn)行其內(nèi)的代碼段。但是每次創(chuàng)建一個(gè)這樣的可運(yùn)行的實(shí)例都要給textarea元素自定義一個(gè)id值和寫入雙擊事件，好不麻煩。2009-12-12
ElementUI 的 Tree 組件的基本使用實(shí)戰(zhàn)教程
這篇文章主要介紹了ElementUI 的 Tree 組件的基本使用實(shí)戰(zhàn)教程,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
Three.js+React制作3D夢(mèng)中海島效果
深居內(nèi)陸的人們，大概每個(gè)人都有過大海之夢(mèng)吧。本文使用React+Three.js技術(shù)棧，實(shí)現(xiàn)3D海洋和島嶼，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-05-05
JS輸出空格的簡(jiǎn)單實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫S輸出空格的簡(jiǎn)單實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09