如何通过点击链接用JavaScript打开Bootstrap 4 Modal（仅可修改href）

我完全懂你的困扰——现在页面一加载模态框就弹出来，根本不是你想要的“点击链接才触发”的效果。咱们先理清问题根源，再给你符合限制条件的解决方案：

问题出在哪？ #

你当前直接在页面加载完成后调用$('#Modal').modal()，这个方法不带参数时默认会立即显示模态框，所以页面一打开就触发了，完全跳过了“点击触发”的逻辑。

符合限制的可行方案 #

因为你不能修改链接的HTML结构，只能调整它的href属性，咱们这么操作：

1. 调整链接的href（推荐）
   把原来的<a href="#Modal">Open modal</a>改成<a href="#">Open modal</a>——这样能避免点击链接时页面自动滚动到隐藏的模态框元素位置，体验更顺畅。

2. 编写正确的JS触发逻辑
   别再页面加载时直接调用模态框显示方法了，把这个逻辑放到链接的点击事件回调里，同时阻止链接的默认跳转行为：

   $(document).ready(function() {
     // 精准定位你的链接（如果保留原href="#Modal"，就把选择器改成a[href="#Modal"]）
     $('a[href="#"]').on('click', function(e) {
       // 阻止链接默认的跳转行为
       e.preventDefault();
       // 只有点击时才触发模态框显示
       $('#Modal').modal('show');
     });
   });
   

额外注意事项 #

确保你的Bootstrap 4模态框HTML结构是规范的，比如包含必要的类（否则可能显示异常）：

<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="ModalLabel">模态框标题</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        这里放你的模态框内容
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

这样调整后，只有点击链接时才会弹出模态框，完美符合你的需求！

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