如何阻止点击模态框触发链接时#myModal显示于URL中？

方案一：修改链接属性并移除冗余触发标记 #

把原链接的href="#myModal"替换为href="javascript:void(0)"，同时删掉data-bs-toggle="modal"（你已经通过自定义JS触发模态框，这个属性会触发Bootstrap默认行为导致锚点被添加到URL）：

<a href="javascript:void(0)" class="open-modal">Load me</a>

你的JS代码可以保持不变：

<script>
$(document).ready(function(){
  $(".open-modal").click(function(){
    $("#myModal").modal('show');
  });
});
</script>

方案二：保留原href但阻止默认跳转行为 #

如果不想修改href属性，在点击事件里添加e.preventDefault()来阻止链接的默认锚点跳转行为：

<script>
$(document).ready(function(){
  $(".open-modal").click(function(e){
    e.preventDefault(); // 阻止默认跳转，避免URL添加锚点
    $("#myModal").modal('show');
  });
});
</script>

同样建议移除data-bs-toggle="modal"，避免Bootstrap默认触发逻辑和自定义JS冲突。

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