Javascript 如何在视口中居中引导5模式对话框？

我正在为我的站点使用Bootstrap5。我有一个按钮，可以在模式中启动测验。问题是按钮在页面中的位置很低（滚动后出现）。现在，当模态启动时，背景变暗，但除非向上滚动，否则不会看到模态对话框。我希望模式对话框在点击按钮时垂直显示在视口中心，用户不需要向上滚动。

---

我试着把焦点放在模态上，但没有用。Bootstrap5文档也没有提出任何解决方案。有人可以在这里提出建议吗？

您可以使用javascript手动向上滚动，也可以在固定位置（

position:fixed；

）div中“启动”测验，因此测验始终显示在屏幕上

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

就是这样： 添加类

模态对话框模态对话框居中模态对话框可滚动

因此您不必滚动查看按钮，它会在单击模态打开按钮后显示在页面上。

启动演示模式
情态标题
在发酵罐中发酵。我是奥迪奥先生，我是艾格斯塔·艾格特·奎姆先生。莫里·利奥·里索斯，圣殿之门，爱神之门的前庭。
这是一个伟大的真理，是一个神圣的圣器，是一个伟大的圣器。
这是一个非常重要的问题。这是一个巨大的共同目标，也是一个神圣的世界。Donec ullamcorper nulla non metus拍卖商fringilla。
在发酵罐中发酵。我是奥迪奥先生，我是艾格斯塔·艾格特·奎姆先生。莫里·利奥·里索斯，圣殿之门，爱神之门的前庭。
这是一个伟大的真理，是一个神圣的圣器，是一个伟大的圣器。
接近
保存更改

---

您能否添加一些代码以更清晰地显示此解决方案不起作用。“模式对话框可滚动”使“模式对话框”可滚动，它不会将对话框滚动到视口中心。@sb16给它一个绿色勾号“使用绝对定位”不是一个选项，因为我无法计算容器div的长度以及“测验启动程序”按钮的向下距离。您建议的另一件事（使用javascript手动滚动），plz能解释一下怎么做吗？谢谢你的帮助。哎呀！我的坏-我的意思是固定定位！滚动时请查看屏幕右下角，您将看到它是如何工作的-。

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

<!-- 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>