如何使 bootstrap 5 模态对话框在视口中居中？

Question

我正在为我的网站使用 bootstrap 5。我有一个按钮可以在模态中启动测验。问题是按钮在页面中的位置很低（滚动后出现）。现在，当模式启动时，背景变暗，但除非向上滚动，否则看不到模式对话框。我希望模式对话框在单击按钮时垂直显示在视口的中心，并且不需要用户向上滚动。我试过将焦点设置在模式上但无济于事。 Bootstrap 5 文档也没有提出任何解决方案。有人可以在这里提出建议吗？

Answer 1

您可以使用 javascript 手动向上滚动，也可以 'launch' 将测验置于固定位置 (position: fixed;) div，因此它始终在您的屏幕.

要滚动，只需将其放入您的代码中，并在测试启动时激活它（可能通过函数）。

window.scrollTo({
  top: 0,
  left: 0,
  behavior: 'smooth'
});

Answer 2

就是这样：添加类 modal-dialog modal-dialog-centered modal-dialog-scrollable 这样您就不必滚动查看按钮，它会在单击模式打开按钮后出现在页面上。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

https://jsfiddle.net/8m7whc2s/

如何使 bootstrap 5 模态对话框在视口中居中？

How to center the bootstrap 5 modal dialog in viewport?

javascript

bootstrap-modal