モーダルボックスが表示されない

Question

この画像を使用してモーダルボックスを開くにはどうすればよいですか？

<div class="grid"> 
      <figure class="effect-apollo"> 
       <a href="#modal-ef" role="button" data-toggle="modal"> 
        <img src="http://i.imgur.com/KDlptL.png"> 
       </a> 
       <figcaption> 
        <h2>Strong <span>Apollo</span></h2> 
        <p>Apollo's last game of pool was so strange.</p> 
       </figcaption>   
      </figure> 
     </div> 

私はリンクとして画像を使用しようとしましたが、うまくいきませんでした。自身が次のようになります モーダル：

<div id="modal-ef" class="modal"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <span class="close">&times;</span> 
        <h2></h2> 
       </div> 
       <div class="modal-body"> 
        <!--<div class="avatar"> 
         <img src="http://i.imgur.com/DsekuY7.gif alt="" /> 
        </div>--> 
        <p></p> 
       </div> 
       <div class="modal-footer"></div> 
      </div> 
     </div>  

Answer 1

は、私はあなたがこのように、<>内のimgとfigcaptionを置くべきだと思う：

<div class="grid"> 
       <figure class="effect-apollo"> 
        <a class="modal-button" data-content="ef"> 
         <img src="#"> 
         <figcaption> 
          <h2>Strong <span>Apollo</span></h2> 
          <p></p> 
         </figcaption> 
        </a>   
       </figure> 
      </div>