ブートストラップ：イメージ上にモーダルウィンドウを表示するループ内をクリック

Question

イメージ上にモーダルウィンドウを開く必要があります。これは私がやっていることで、必要な結果が得られません。ロジックが正しいか何かが黒色層がその上に来て、それ

<?php for ($i=0; $i<5;$i++):?> 
     <a id = "<?=$i?>" href="#"><img src="https://i.stack.imgur.com/6Molf.png?s=48&g=1" alt=""> </a> 


<div class="modal fade" id="<?=$i?>" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" 
    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> 

      </div> 
      <div class="modal-body"> 
       Some content 
      </div> 
     </div> 
    </div> 
</div> 

<script type="text/javascript" language="javascript"> 

    $(document).ready(function() { 
     $("#<?=$i?>").click(function() { 
      $('#<?=$i?>').modal('show'); 
     }); 
    }); 

</script> 
<?php endfor;?> 

と間違っているが、表示されませんモーダル添付資料参照画像

Answer 1

これを試してみて、それが

を働くことを願っていた場合に親切に確認してください

<?php for ($i=0; $i<5;$i++):?> 
    <a id = "<?=$i?>" class="aclick" href="#"><img src="https://i.stack.imgur.com/6Molf.png?s=48&g=1" alt=""> </a> 


    <div class="modal fade" id="modal_<?=$i?>" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" 
     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> 

       </div> 
       <div class="modal-body"> 
        Some content 
       </div> 
      </div> 
     </div> 
    </div> 
<?php endfor;?> 

SCRIPT： -

$(".aclick").click(function (e) { 
     e.preventDefault(); 
     var id = $(this).attr('id'); 
     console.log(id); 
     $('#modal_'+id).modal('show'); 
    });