jQuery Bild in der Tabelle Daten Vollbild beim Anklicken

Question

Ich habe Bild in meiner Tabelle. Ich habe versucht, jQuery zu verwenden, um modales fullscreen Bild aufzustoßen. Aber es kann nur an der Spitze der Tabelle Daten

Das ist mein Code

<tbody> 
    <tr> 
    <td><?php echo $i++;?></td> 
    <td><?php echo $d['tanggal_komplain'];?></td> 
    <td><?php echo $d['nama_komplainer'];?><?php echo $d['pembuat'];?></td> 
    <td><?php echo $d['departemen_tujuan'];?></td> 
    <td><?php echo $d['personil_tujuan'];?></td> 
    <td><?php echo $d['subject'];?></td> 
    <td><?php echo $d['isi_komplain'];?></td> 
    <td><?php echo $d['status'];?></td> 
    <td class="align-middle text-center perbesar"> 
     <a href="#" id="pop"> 
     <img id="imageresource" src="image/<?php echo $d['nama_gambar']; ?>" width="80" height="80"> 
     </a> 
    </td> 
    </tr> 
</tbody>  
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
     <h4 class="modal-title" id="myModalLabel">Image preview</h4> 
     </div> 
     <div class="modal-body"> 
     <img src="" id="imagepreview" style="width: 400px; height: 264px;" > 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 

<script> 
$("#pop").on("click", function() { 
    $('#imagepreview').attr('src', $('#imageresource').attr('src')); // here asign the image to the modal when the user click the enlarge link 
    $('#imagemodal').modal('show'); // imagemodal is the id attribute assigned to the bootstrap modal, then i use the show function 
}); 
</script> 

Hoffnung jemand kann mir helfen: ((

Answer 1

Verwenden preventDefaulta Link

`$("#pop").on("click", function(e) { 
    e.preventDefault(); 
$('#imagepreview').attr('src', $('#imageresource').attr('src')); // here  asign the image to the modal when the user click the enlarge link 
$('#imagemodal').modal('show'); // imagemodal is the id attribute assigned  to the bootstrap modal, then i use the show function 
});` 

zu deaktivieren (oder)

entfernen href und fügen type=button in pop Link ... <a type="button" id="pop">...</a>