So i made this modal pop up when click image using jquery, but when modal is show the page always scroll to top, i want the page is stay.

here's my code:

<a href="#" class="pop p-2">
   @foreach($product->product_photo as $photo)
   <img src="{{ $photo->url }}" style="width: 150px;max-height: 150px">
   @endforeach
</a>

here's the modal:

<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
   <div class="modal-content">
    <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">&times;</span>
        </button>
        <div class="text-center">
            <img src="" class="imagepreview" style="width: 500px;" >
         </div>
     </div>
    </div>
</div>
</div>

here's the jquery:

$(function() {
    $('.pop').on('click', function() {
       $('.imagepreview').attr('src', $(this).find('img').attr('src'));
       $('#imagemodal').modal('show');
    });
});

i have tried to add

body.modal-open{
   overflow:hidden;
}

but it doesn't effect anything