如何实现Bootstrap模态框内链接在指定div中打开而非标签页

你的问题出在代码的执行时机和事件逻辑上——原代码在页面加载完成后就立刻尝试加载所有a标签的内容，而不是在用户点击链接时触发，而且没有阻止a标签默认的跳转行为，咱们一步步来修正：

问题根源分析 #

• 原代码$(document).ready(function() { $("#help_modal a").each(function() { $("#help_modal").load($(this).attr("href")); }); });会在页面就绪时遍历所有链接并执行加载，这完全不符合你“点击才触发”的需求
• 没有拦截a标签的默认跳转行为，所以点击后浏览器还是会执行原生的页面跳转

修正后的解决方案 #

替换你的JS代码为以下内容，核心是绑定点击事件+阻止默认行为：

$(document).ready(function() {
  // 给模态框内的所有a标签绑定点击事件
  $("#help_modal a").on("click", function(event) {
    // 阻止a标签默认的跳转行为，这是关键
    event.preventDefault();
    // 获取当前点击链接的目标地址
    const targetUrl = $(this).attr("href");
    // 将目标页面内容加载到指定的help_modal容器中
    $("#help_modal").load(targetUrl);
  });
});

额外注意事项 #

• 跨域限制说明：你示例里用的是外部域名（比如google、stackoverflow），由于浏览器的同源策略限制，直接用jQuery load()加载跨域页面会失败。如果是加载你自己域名下的页面，这个方法完全可行；如果确实需要加载外部网站内容，你可能需要通过后端代理来实现，或者考虑嵌入iframe的方式（不过iframe会带来样式和交互的额外问题）。
• 模态框状态保持：加载内容后，模态框会维持打开状态，完全符合你的需求。

完整的可运行代码示例：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
  $("#help_modal a").on("click", function(event) {
    event.preventDefault();
    const targetUrl = $(this).attr("href");
    $("#help_modal").load(targetUrl);
  });
});
</script>
<div class="container">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    Open modal
  </button>
  <!-- The Modal -->
  <div class="modal" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <!-- Modal body -->
        <div class="modal-body" id="help_modal">
          <a href="your-local-page.html" class="btn btn-block btn-lg btn-primary">Open Local Page</a>
          <a href="another-local-page.html" class="btn btn-block btn-lg btn-secondary">Open Another Local Page</a>
        </div>
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
</div>

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