Блог

Главная - Вопросы по программированию - Как центрировать модальное диалоговое окно bootstrap 5 в окне просмотра?

Как центрировать модальное диалоговое окно bootstrap 5 в окне просмотра?

#javascript #bootstrap-modal

#javascript #bootstrap-модальный

Вопрос:

Я использую bootstrap 5 для своего сайта. У меня есть кнопка, которая запускает тест в модальном режиме. Проблема в том, что кнопка расположена довольно низко на странице (появляется после прокрутки). Теперь, когда запускается модальный режим, фон становится темным, но модальный диалог не виден, если не прокручивать его вверх. Я бы хотел, чтобы модальный диалог отображался вертикально в центре окна просмотра при нажатии кнопки, и это не должно требовать прокрутки пользователем. Я пытался настроить фокус на модальный, но безрезультатно. Документация Bootstrap 5 также не предлагает никакого решения. Может кто-нибудь, пожалуйста, предложить что-нибудь здесь?

Комментарии:

1. не могли бы вы добавить какой-нибудь код, чтобы быть более понятным

Ответ №1:

Вы можете либо вручную прокрутить вверх с помощью javascript, либо «запустить» тест в фиксированном положении ( position: fixed; ) div, чтобы он всегда был у вас на экране.

Чтобы прокрутить, просто поместите это в свой код и активируйте его всякий раз, когда запускается тест (возможно, с помощью функции).

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

Комментарии:

1. использование абсолютного позиционирования не является вариантом, так как я не могу рассчитать, какой длины будет div контейнера и как далеко будет расположена кнопка запуска викторины. другая вещь, которую вы предложили (прокрутка вручную с помощью javascript), не могли бы вы объяснить, как это сделать? Спасибо за вашу помощь.

2. Упс! мой плохой — я имел в виду фиксированное позиционирование! Посмотрите на нижнюю правую часть экрана при прокрутке, и вы увидите, как это работает — w3schools.com/css/css_positioning.asp .

Ответ №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/

Комментарии:

1. это решение не работает. modal-dialog-scrollable делает модальный диалог прокручиваемым, он не прокручивает диалог до центра окна просмотра.

2. @sb16 поставьте зеленую галочку