1

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?

sb16
  • 65
  • 1
  • 9

2 Answers2

2

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'
});
Endothermic_Dragon
  • 1,147
  • 3
  • 13
  • using absolute positioning is not an option as I cannot calculate how long the container div will be and how far down the quiz launcher button will be. the other thing you have suggested (scrolling manually using javascript), could plz explain how to do it? Thanks for your help. – sb16 Jan 09 '21 at 14:19
  • Oops! my bad - I meant fixed positioning! Look at the bottom right side of your screen when scrolling, and you'll see how it works - https://www.w3schools.com/css/css_positioning.asp. – Endothermic_Dragon Jan 09 '21 at 14:23
1

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

Nikhil S
  • 3,786
  • 4
  • 18
  • 32