今天幫同事調了一個代碼，他們的項目最近在用Bootstrap做開發，突然間，他遇到了一個奇怪的問題，如果一個頁面中，有多個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')"> 發布內容 </button> </div> </div><!-- /.modal-content --> </div> 針對這個問題，做了一些調試，發現沒有任何的JS代碼錯誤，瀏覽器也沒有報錯。
最后，仔細想了想，估計是樣式套用有沖突，以前也遇到過類似的問題，解決的辦法很簡單，用DIV將每個dialog的代碼片段包裹一下，就能夠解決這個問題了。
照著以前的解決辦法處理，用DIV包一下，果然問題解決，兩個dialog都能夠正確彈出。
以上所述是小編給大家介紹的Bootstrap3 多個模態對話框無法顯示的解決方案，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
