CODEWITHSUNDEEP
javascriptbootstrap-modal
sb16
sb16

Reputation: 75

How to center the bootstrap 5 modal dialog in viewport?

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?

Upvotes: 2

Views: 6140

Answers (2)

Endothermic_Dragon
Endothermic_Dragon

Reputation: 1187

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'
});

Upvotes: 2

Nikhil
Nikhil

Reputation: 3950

This is it: add classes modal-dialog modal-dialog-centered modal-dialog-scrollable so you dont have to scroll to see the button, it appears on the page after clicking the modal open button. 

<!-- 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/[email protected]/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

https://jsfiddle.net/8m7whc2s/

Upvotes: 1

Related Questions