Twitter Bootstrap - 이미지를 클릭하여 여러 이미지와 여러 모달이있는 모달을 표시합니다.

Question

9 개의 이미지가 있고 각 이미지마다 다른 모달을 표시해야합니다. 어떤 그림을 클릭하든 첫 번째 모달 만 보여줍니다. 나는 그들 모두가 동일한 ID를 가지고 있으며 그것은 아마 내 부분에 오류가 있다는 것을 알 수있다. 그러나 나는 자바 스크립트에서도 그다지 좋지 않다. 전부 및 모두, 한 그림을 클릭하고, 모달 A와 그 내용을 보여주고, 다른 그림을 클릭하고, 모달 B와 그 다른 내용을 보여줍니다.

내가 가진 모든입니다

<script type="text/javascript">$('#myModal').modal('show')</script> 

     <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true"> 
     <div class="modal-dialog modal-lg"> 
      <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title" id="myModalLabel">1</h4> 
      </div> 
       <div class="modal-body"> 
       <h1>Select a unit to study.</h1> 
       <a href="sit1e" target="_blank"> 
        <img src="1.png" class="img-responsive" /> 
       </a> 
       <a href="site2" target="_blank"> 
        <img src="2.png" class="img-responsive" /> 
       </a> 
       <div class="icons"> 
       <a href="sound" target="_blank"> 
        <img src="audio.png" class="img-responsive" /> 
       </a> 
       <a href="print" target="_blank"> 
        <img src="print.png" class="img-responsive" /> 
       </a> 
       <a href="" target="_blank">      
        <img src="info.png" class="img-responsive" /> 
       </a> 
       <a href="" target="_blank"> 
        <img src="link.png" class="img-responsive" /> 
       </a> 
       </div> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
     </div> 

     <div class="col-md-4 col-sm-4 col-xs-12"> 
      <a href="#myModal" id="press1b" class="thumbnail" data-toggle="modal" data-target="#largeModal"> 
      <img src="2.jpg" class="img-responsive"/> 
      </a> 
     </div> 

       <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true"> 
     <div class="modal-dialog modal-lg"> 
      <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title" id="myModalLabel">1</h4> 
      </div> 
       <div class="modal-body"> 
       <h1>Select a unit to study.</h1> 
       <a href="sit1e" target="_blank"> 
        <img src="1.png" class="img-responsive" /> 
       </a> 
       <a href="site2" target="_blank"> 
        <img src="2.png" class="img-responsive" /> 
       </a> 
       <div class="icons"> 
       <a href="sound" target="_blank"> 
        <img src="audio.png" class="img-responsive" /> 
       </a> 
       <a href="print" target="_blank"> 
        <img src="print.png" class="img-responsive" /> 
       </a> 
       <a href="" target="_blank">      
        <img src="info.png" class="img-responsive" /> 
       </a> 
       <a href="" target="_blank"> 
        <img src="link.png" class="img-responsive" /> 
       </a> 
       </div> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
     </div> 

Answer 1

 <div class="col-md-4 col-sm-4 col-xs-12"> 
      <a href="#myModal" id="press1b" class="thumbnail" data-toggle="modal" data-target="#largeModal"> 
      First Modal 
      </a> 
      <a href="#smallModal" id="press1b" class="thumbnail" data-toggle="modal" data-target="#smallModal"> 
      Second Modal 
      </a> 
     </div> 
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true"> 
     <div class="modal-dialog modal-lg"> 
      <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title" id="myModalLabel">1</h4> 
      </div> 
       <div class="modal-body"> 
       <h1>Select a unit to study.</h1> 
       FIRST MODAL CONTENT 
       </div> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
     </div> 
<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModal" aria-hidden="true"> 
     <div class="modal-dialog modal-lg"> 
      <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title" id="myModalLabel">1</h4> 
      </div> 
       <div class="modal-body"> 
       <h1>Select a unit to study.</h1> 
       SECOND MODAL CONTENT 
       <a href="" target="_blank"> 
        <img src="link.png" class="img-responsive" /> 
       </a> 
       </div> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
     </div>