부트 스트랩을 사용하여 페이지 앞쪽으로 모달을 가져 오는 방법은 무엇입니까?

Question

부트 스트랩을 사용하여 모달을 구현하려고합니다. 버튼을 클릭하면 화면이 희미 해지고 모달이 나타나지만 이미지 뒤에 표시되며 사용자가 읽을 수 없습니다. 이 모달을 앞으로 어떻게 가져 옵니까?

<div class ="container-fluid"> 
<div class = "row-fluid"> 

    <div class = "span2"> 
     <!-- Modal --> 
     <div class="modal hide fade" id="myModal"> 
      <div class="modal-header"> 
      <a class="close" data-dismiss="modal">×</a> 
      <h3>Modal header</h3> 
      </div> 
      <div class="modal-body"> 
      <p>One fine body…</p> 
      </div> 
      <div class="modal-footer"> 
      <a href="#" class="btn">Close</a> 
      <a href="#" class="btn btn-primary">Save changes</a> 
      </div> 
     </div> 

     <a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch demo modal</a> 
    </div> 

    <div class = "span8">  
     #a lot of images in this div 
    </div> 

</div> 
</div> 

Answer 1

알아 냈어. 페이지의 고정 요소 내에 모달을 사용할 수 없습니다.

Answer 2

코드를 입력하는 것이 좋습니다. bootstrap.css 및 부트 스트랩 modal.js 라이브러리를 포함해야합니다.

라이브 DEMO.