今天幫同事調了一個程式碼，他們的專案最近在用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>
 

最後，仔細想了想，估計是樣式套用有衝突，以前也遇到過類似的問題，解決的辦法很簡單，用DIV將每個dialog的程式碼片段包裹一下，就能夠解決這個問題了。

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