부트 스트랩 v 3.1.1 배경은 모달입니다

Question

내 사이트 중 하나는 트위터 부트 스트랩을 사용하지 않습니다. 나는이 방법으로 그것을 포함 시켰 있도록 한 페이지에서 내가 어떤 부트 스트랩 기능이 필요합니다

<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> 

모달가 표시되는 문제가있다 :

<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> 

나는 부트 스트랩 모달 싶어 그래서 난이 다음과 같은 코드를 사용 페이드되고 페이드가되어 클릭 할 수 없게됩니다. 또한 페이지의 모달을 닫을 수 없습니다.

나는 부트 스트랩 3.1.1와 jQuery를 1.7.2

Answer 1

솔루션 # 업그레이드 버전 1

변경의 jQuery v1.7.2을 사용하고 있습니다. bootstrap 3.1.1에 대한 종속성을 참조하십시오

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

---

솔루션 # stylesheets/bootstrap.css도 V3.1.1되는 2

확인합니다. 이 문제는 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

은 덜 권장하지만 모달가 고정 컨테이너 내부 의도적 때 작업 솔루션은 배경

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

그에게 좋은 해결책을 부정적 z-index을주고있다.