Bootstrap3 多個模態(tài)對話框無法顯示的解決方案
更新時間：2017年02月23日 11:34:03 作者：oarsman
這篇文章主要介紹了Bootstrap3 多個模態(tài)對話框無法顯示的解決方案,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
今天幫同事調(diào)了一個代碼，他們的項目最近在用Bootstrap做開發(fā)，突然間，他遇到了一個奇怪的問題，如果一個頁面中，有多個Modal對話框的話，排列在第一個的對話框，能夠正確顯示，第二個，只能導(dǎo)致頁面出現(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()">關(guān)閉
</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代碼錯誤，瀏覽器也沒有報錯。
最后，仔細(xì)想了想，估計是樣式套用有沖突，以前也遇到過類似的問題，解決的辦法很簡單，用DIV將每個dialog的代碼片段包裹一下，就能夠解決這個問題了。
照著以前的解決辦法處理，用DIV包一下，果然問題解決，兩個dialog都能夠正確彈出。
以上所述是小編給大家介紹的Bootstrap3 多個模態(tài)對話框無法顯示的解決方案，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
ECMAScript 6是JavaScript語言的下一代標(biāo)準(zhǔn)，已經(jīng)在2015年6月正式發(fā)布了。這篇文章主要介紹了工作中常用到的ES6語法,需要的朋友可以參考下2018-09-09
淺談es6 javascript的map數(shù)據(jù)結(jié)構(gòu)
本篇文章主要介紹了淺談es6 javascript的map數(shù)據(jù)結(jié)構(gòu)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了基于javascript實現(xiàn)全屏漂浮廣告，光標(biāo)懸浮廣告停止移動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
JavaScript高級程序設(shè)計（第三版）學(xué)習(xí)筆記6、7章
這篇文章主要介紹了JavaScript高級程序設(shè)計（第三版）學(xué)習(xí)筆記6、7章 的相關(guān)資料,需要的朋友可以參考下2016-03-03
這篇文章主要給大家介紹了關(guān)于js兩個數(shù)組合并去重的相關(guān)資料,日常開發(fā)中經(jīng)常會用到的JS數(shù)組去重,文中將每種方法都給出了代碼示例,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了JSON字符串和JSON對象相互轉(zhuǎn)化方法,結(jié)合實例形式詳細(xì)分析了json對象與字符串的功能、使用、轉(zhuǎn)換方法及相關(guān)注意事項,需要的朋友可以參考下2017-01-01
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)留言板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了基于原生JS封裝的Modal對話框插件的示例代碼,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
這篇文章主要介紹了小程序中手機號識別的示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了微信小程序 生成攜帶參數(shù)的二維碼,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值2019-10-10