Модальные окна в Bootstrap 4 (modal)

Модальные окна в Bootstrap 4 (modal)

Bootstrap позволяет вам очень просто добавить модальное диалоговое окно (modal) на сайт. Модальное окно - это диалоговое окно, которое появляется поверх всего содержимого сайта, в то время как остальная часть экрана затемнена. Это заставляет пользователя выполнить некоторое действие в модальном окне, прежде чем продолжить (например согласиться с условиями).

Чтобы создать модальное окно используйте класс .modal вместе с другими классами .modal-* для определения других разделов окна (заголовок, контент, подвал).

<!-- Кнопка для открытия модального окна -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#flipFlop">Click Me</button>

<!-- Модальное окно -->
<div class="modal fade" id="flipFlop" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="modalLabel">Flip-flop</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        A type of open-toed sandal.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Размер модального окна

По умолчанию, модальные окна имеют средний размер. Но вы можете указать маленький или большой по мере необходимости.

Маленькое модальное окно

Для небольшого размера модального окна, добавьте класс .modal-sm через пробел после класса .modal-dialog:

<div class="modal-dialog modal-sm" role="document">

Большое модальное окно

Для большого размера модального окна, добавьте класс .modal-lg через пробел после класса .modal-dialog:

<div class="modal-dialog modal-lg" role="document">

Убрать анимацию модального окна

Для того, чтобы убрать анимацию при появлении и исчезании модального окна, уберите класс .fade который указан через пробел после основного блока с классом .modal в примере выше.

Оставьте первый комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*