부트 스트랩 3 모달 (이미지 라이트 박스)

Question

다양한 예제 (작동)를 살펴보고 내 코드를 살펴 보았습니다. 나는 완전히 확신 할 수는 없지만 어떤 이유로 든 내가 잘못하고있는 것을 볼 수는 없습니다. 나는 나를 위해 그것을 보면서 내가 바보라고 말해 줄 다른 사람이 필요할지도 모른다. 내가 뭘 놓치고 있니?

JS 바이올린 : http://jsfiddle.net/yv47nek3/

코드 (HTML 데이터를 사용하여 속성) : 바이올린에

<div class="col col-md-6"> 
    <figure> 
    <a data-toggle="modal" data-target="myModal1" href="#"> 
     <img src="http://placehold.it/150" class="img-responsive img-rounded center-block" aria-describedby="year6saratogareads.500x320.jpg1476812731"> 
    </a> 
    <figcaption id="year6saratogareads.500x320.jpg1476812731" class="text-center">Image Description</figcaption> 
    </figure> 
</div> 
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span> 
     </button> 
     <h4 class="modal-title" id="myModalLabel1">Image 1</h4> 
     </div> 
     <div class="modal-body"> 
     <img src="http://placehold.it/500"> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 

처럼, 부트 스트랩 CSS와 JS가 존재한다. 그러나 이미지를 클릭해도 모달을 여는 것처럼 보이지 않습니다. 부트 스트랩의 모달은 너무 단순합니다. 어떻게 엉망으로 만들었는지 완전히 모릅니다. 도움?

Answer 1

부트 스트랩 문서에 오타가있는 것 같습니다. data-target에는 대상으로하는 HTML ID 속성을 식별하는 #이 있어야합니다.

을 통해 찾았 bootstrap 3 modal window not working

가 또 다른 문제는 여기에, 그것은 분명히 모달이 링크를 활성화하고, 해당 링크는 HREF 태그에 뭔가가 포함되어있는 경우, 부트 스트랩이에 링크 된 데이터로드를 시도한다는 것입니다 모달의 본문 (데이터 타겟 무시). 이것은 결국 (이 경우) ascii 매체에 이진 데이터를 표시하려고합니다. 그것은로드/변환하는 동안 내 브라우저를 몇 번 충돌.

HTML 데이터 속성 만 사용하려면 앵커 태그의 HREF를 제거해야합니다 (JS가 중단되거나 사용자가 사용할 수없는 경우 백업을 비활성화해야합니다). 그렇지 않으면 모달을 활성화하기 위해 데이터 속성 대신 JS를 사용해야합니다.