Así que hice que este modal apareciera al hacer clic en la imagen usando jquery, pero cuando modal se muestra, la página siempre se desplaza hacia arriba, quiero que la página permanezca.

aquí está mi código:

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

aquí está el 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>

aquí está el jquery:

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

he tratado de agregar

 body.modal-open{ overflow:hidden; }

pero no afecta nada