Bootstrap模式沒有響應

Question

我使用的模式，我從一個以前的網站，它使用正常。區別在於這種模式只會在IE9中出現，才能將用戶引導至更好的瀏覽器。我能夠用一個警報來測試它，並且工作正常。

但是，由於某些原因，當我將以前的網站所做的代碼傳輸到此新網站時，Modal未響應，並且網站上未顯示某一點。

當我嘗試關閉「關閉」按鈕時，它只會刷新頁面。我不知道爲什麼當我關閉「X」按鈕時，它也不起作用。

該代碼被插入到Coldfusion文件中，我不確定它是否會導致衝突。

任何幫助，將不勝感激。

這是我爲模態所做的。即只檢測是否是IE9與否：

<!---<div class="ie-only" style="overflow-y:hidden;"> 
     <div class="modal fade in" id="myModal" aria-hidden="false" style="display:block; padding-right:17px;"> 
      <div class="modal-dialog modal-md custom-height-modal"> 
       <div class="modal-content"> 
        <div class="modal-header" style="background-color:##428bca"> 
         <button type="button" class="close" data-miss="modal">x</button> 
         <h3 class="modal-header" style="background-color:##428bca; text-align:center">Attention</h3>       
        </div><!---Modal-Header Div---> 
        <div class="modal-body"> 
         <p style="text-align:center">You are using an outdated browser.<br /> <br /> <a href="http://browsehappy.com/">Upgrade your browser today</a> to better experience this site.</p> 
        </div><!---Modal-Body Div---> 
        <div class="modal-footer"> 
         <p class="text-center"><a class="btn btn-default" data-dismiss="modal">Close</a></p> 
        </div><!---Modal-Footer Div---> 
       </div><!---Modal-Content Div---> 
      </div><!---Custom Height Div---> 
     </div><!---Modal Fade in Div---> 
    </div><!---Start of Modal Div--->    
    <!--End of Modal container--> ---> 
    <!---<script> 
      $(function(){ 
       $('##myModal').modal('show'); 
      } 
      </script> 
       <div class="modal-backdrop fade in"></div>---> 

Answer 1

它看起來像有在你的代碼語法問題：

$(function(){ 
    $('##myModal').modal('show'); 
} 

這是不正確;它應該是：

$(function(){ 
    $('#myModal').modal('show'); 
}); 

將模態載荷更正爲模態時，這反過來導致關閉按鈕按預期運行。缺少這個模式仍然會加載（因爲你已經激活了in），但是加載時沒有覆蓋，並且缺少Bootstrap的Modal JS的鉤子，這就解釋了爲什麼你的關閉按鈕不起作用。

您可以在這裏看到的功能例如：爲什麼你的代碼是不是在你的模態div工作

的in類http://www.bootply.com/24IPYP8O3F

指示引導，以使該模式可見，並根據其位置Bootstrap CSS。儘管你的jQuery是錯誤的，所以Bootstrap把它看作只是文檔一部分的HTML。

一旦您更正了jQuery Bootstrap的處理過程，作爲Modal Javascript組件。一旦發生這種情況，它會顯示覆蓋圖（默認情況下），並且data-dismiss屬性會被正確處理。

它的缺點是，爲什麼你的Modal沒有像Modal那樣表現的整個問題是你的jQuery是錯誤的。