javascript - How to center the bootstrap 5 modal dialog in viewport?

Question

I am using bootstrap 5 for my site. I have a button that launches a quiz in a modal. Problem is that the button is positioned quite low in the page (appears after scrolling). Now when the modal launches the background becomes dark but the modal dialog is not seen unless one scrolls up. I would like the modal dialog to show vertically in the center of viewport when the button is clicked and it should not require any scrolling up by the user. I have tried setting focus on modal but to no avail. Bootstrap 5 documentation also doesn't suggest any solution. Could anyone plz suggest something here?

Answer 1

You could either manually scroll up using javascript, or you could 'launch' the quiz in an fixed position (position: fixed;) div, so it's always on your screen.

To scroll, just put this in your code, and activate it whenever the test launches (possible through a function).

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