通过单击导航到元素关闭 Bootstrap 模式

Question

我有一个包含一些内容和一个按钮的模式。该按钮应将用户向页面底部滚动到一个元素。我看到了类似的问题，但这些答案中的 none 帮助了我在 CMS 中的案例。它对我有用的唯一方法是设置超时并延迟模式关闭，但现在页面在模式关闭后立即滚动回顶部。这就是现在发生的事情 1. 模式打开，用户单击模式中的按钮 2. 页面滚动到底部，模式关闭 3. 然后页面在模式关闭时自行滚动回顶部。

这就像带# 的Url 不是持久的，它只在模式打开时有效。模式关闭后，所有内容都会重置，页面会滚动回默认设置（顶部）。

这是我的代码：

$('#request-btn').click(function() {
    var $modalDialog = $("#modalPopup");
    setTimeout(function() {
      $modalDialog.modal('hide');
    }, 1000);
});

这是我的模态标记：

<div aria-hidden="true" aria-labelledby="exampleModalLabel" class="modal fade" id="modalPopup" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <h4>
          READY FOR THE NEXT STEP?
        </h4>
      </div>

      <div class="modal-footer">
        <a class="btn red-btn" href="#next-step" id="request-btn">REQUEST MORE INFO</a>
      </div>
    </div>
  </div>
</div>

Answer 1

不是真正的 BS5 问题..更通用的 JS。我还看到您在问题中使用了 jQuery，所以我会用它来回答。有很多方法可以做到这些...问题 #6677035 does this with animation:

<div aria-hidden="true" aria-labelledby="exampleModalLabel" class="modal fade" id="modalPopup" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <h4>
          READY FOR THE NEXT STEP?
        </h4>
      </div>

      <div class="modal-footer">
        <a class="btn red-btn" href="#next-step" id="request-btn">REQUEST MORE INFO</a>
      </div>
    </div>
  </div>
</div>

<div class="m-4 container">
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalPopup">
        Launch demo modal
    </button>
    
    <div style="height:2000px"></div>
    
    <p id="whereweshouldbe">THE OTHER CONTEXT HERE</p>
</div>

  $('#request-btn').click(function() {
    var $modalDialog = $("#modalPopup");
    setTimeout(function() {
      $modalDialog.modal('hide');
      $([document.documentElement, document.body]).animate({
        scrollTop: $("#whereweshouldbe").offset().top
      }, 1000);
    }, 1000);
  });

通过单击导航到元素关闭 Bootstrap 模式

Closing Bootstrap modal with a click to navigation to an element

jquery

bootstrap-5