Bootstrap v 3.1.1背景圖覆蓋模式

我的一個網站不使用Twitter Bootstrap。在一個頁面上我需要一些引導功能，所以我以這種方式包括它：Bootstrap v 3.1.1背景圖覆蓋模式

<link rel="stylesheet" href={"stylesheets/bootstrap.css"} type="text/css" /> 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

我希望有一個引導模態的，所以我用這個下面的代碼：

<a class="btn btn-primary btn-large" data-toggle="modal" data-target=".modal">Launch demo modal</a> 

<div class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <a class="close" data-dismiss="modal">×</a> 
       <h3>This is a Modal Heading</h3> 
      </div> 
      <div class="modal-body"> 
       <h4>Text in a modal</h4> 
       <p>You can add some text here.</p> 
      </div> 
      <div class="modal-footer"> 
       <a href="#" class="btn btn-success">Call to action</a> 
       <a href="#" class="btn" data-dismiss="modal">Close</a> 
      </div> 
     </div> 
    </div> 
</div>

的模式出現時的問題它會淡入淡出，頁面也會變淡，無法點擊。我也無法關閉頁面的模式。

我使用的引導3.1.1和jQuery 1.7.2

來源

2016-06-24 chanchal118

我不確定這是否是原因，但bootstrap 3.1.1要求jquery> = 1.9.0，[link]（https://github.com/twbs/bootstrap/blob/v3.1.1/bower .json） – tmg

我有另一個網站，我使用的是相同版本的jQuery。它在那裏工作得很好。這兩個站點之間的不同之處在於使用引導程序站點範圍很寬，另一個僅在特定頁面中有一個鏈接 – chanchal118

？檢查這個？ – Raduken

解決方案＃1

變化的jQuery v1.7.2的一個升級版。請參閱依賴關係bootstrap 3.1.1：

{ 
    "name": "bootstrap", 
    "version": "3.1.1", 
    . 
    . 
    . 
    "dependencies": { 
    "jquery": ">= 1.9.0" 
    } 
}

解決方案＃2

檢查stylesheets/bootstrap.css也V3.1.1。當js和css版本不匹配時，可能會發生此問題。

/*! 
* Bootstrap v3.1.1 (http://getbootstrap.com) 
* Copyright 2011-2014 Twitter, Inc. 
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 
*/

溶液＃3

自舉模式容納和所有父元素不應該有position: fixed;（也有時relative）。

嘗試從父容器中取出模態。最好的地方就在</body>結束標記之前。

溶液＃4

較少推薦，但工作溶液給予負z-index到背景

.modal-backdrop { 
    z-index: -1; 
}

及其良好的解決方案時，模態是有意的固定容器的內部。 see example

來源

2016-06-24 11:48:44

對我來說，這是解決方案＃3 – chanchal118

Bootstrap v 3.1.1背景圖覆蓋模式

回答

相關問題