Bootstrap modal打开时页面自动滚动到顶部，如何保持页面原有位置不变？

你遇到的跳转问题核心是触发点击的<a>标签href属性为#，点击后会默认执行锚点跳转至页面顶部的行为，和modal本身的CSS无关，你之前添加的CSS是用来阻止modal打开时页面滚动的，不是解决跳转问题的。

方法1：阻止点击事件的默认行为（最推荐） #

修改你的jQuery绑定代码，在点击事件回调中传入事件对象，调用preventDefault()阻止默认跳转：

$(function() {
    $('.pop').on('click', function(e) {
       // 阻止a标签默认的锚点跳转行为
       e.preventDefault();
       $('.imagepreview').attr('src', $(this).find('img').attr('src'));
       $('#imagemodal').modal('show');
    });
});

方法2：修改a标签的href属性 #

把触发元素的href="#"替换为href="javascript:void(0)"，直接取消a标签的跳转逻辑：

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

额外说明 #

你之前添加的body.modal-open{ overflow:hidden; }样式Bootstrap默认已经内置，不需要额外添加，如果后续出现modal打开时页面还能滚动的问题，可以给该样式加优先级：

body.modal-open {
   overflow: hidden !important;
}

内容的提问来源于stack exchange，提问作者Alghany Jagad