快捷導(dǎo)航

Bootstrap3 多個(gè)模態(tài)對(duì)話框無(wú)法顯示的解決方案

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

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

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

第一個(gè)，正常彈出的Dialog

第二個(gè)無(wú)法彈出，只是頁(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è)問(wèn)題，做了一些調(diào)試，發(fā)現(xiàn)沒(méi)有任何的JS代碼錯(cuò)誤，瀏覽器也沒(méi)有報(bào)錯(cuò)。
最后，仔細(xì)想了想，估計(jì)是樣式套用有沖突，以前也遇到過(guò)類似的問(wèn)題，解決的辦法很簡(jiǎn)單，用DIV將每個(gè)dialog的代碼片段包裹一下，就能夠解決這個(gè)問(wèn)題了。

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

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

您可能感興趣的文章:

相關(guān)文章

工作中常用到的ES6語(yǔ)法
ECMAScript 6是JavaScript語(yǔ)言的下一代標(biāo)準(zhǔn)，已經(jīng)在2015年6月正式發(fā)布了。這篇文章主要介紹了工作中常用到的ES6語(yǔ)法,需要的朋友可以參考下
2018-09-09
淺談es6 javascript的map數(shù)據(jù)結(jié)構(gòu)
本篇文章主要介紹了淺談es6 javascript的map數(shù)據(jù)結(jié)構(gòu)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
基于javascript實(shí)現(xiàn)全屏漂浮廣告
這篇文章主要介紹了基于javascript實(shí)現(xiàn)全屏漂浮廣告，光標(biāo)懸浮廣告停止移動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-03-03
JavaScript高級(jí)程序設(shè)計(jì)（第三版）學(xué)習(xí)筆記6、7章
這篇文章主要介紹了JavaScript高級(jí)程序設(shè)計(jì)（第三版）學(xué)習(xí)筆記6、7章的相關(guān)資料,需要的朋友可以參考下
2016-03-03
js兩個(gè)數(shù)組合并去重的方法大全
這篇文章主要給大家介紹了關(guān)于js兩個(gè)數(shù)組合并去重的相關(guān)資料,日常開(kāi)發(fā)中經(jīng)常會(huì)用到的JS數(shù)組去重,文中將每種方法都給出了代碼示例,需要的朋友可以參考下
2023-09-09
JSON字符串和JSON對(duì)象相互轉(zhuǎn)化實(shí)例詳解
這篇文章主要介紹了JSON字符串和JSON對(duì)象相互轉(zhuǎn)化方法,結(jié)合實(shí)例形式詳細(xì)分析了json對(duì)象與字符串的功能、使用、轉(zhuǎn)換方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下
2017-01-01
JS實(shí)現(xiàn)留言板功能
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)留言板功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
基于原生JS封裝的Modal對(duì)話框插件的示例代碼
這篇文章主要介紹了基于原生JS封裝的Modal對(duì)話框插件的示例代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-09-09
小程序中手機(jī)號(hào)識(shí)別的示例
這篇文章主要介紹了小程序中手機(jī)號(hào)識(shí)別的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
微信小程序生成攜帶參數(shù)的二維碼
這篇文章主要介紹了微信小程序生成攜帶參數(shù)的二維碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值
2019-10-10