Bootstrap Modal / Модальные окна

Используйте JavaScript плагин модальных окон Bootstrap, чтобы добавлять на ваш сайт диалоги для лайтбоксов, пользовательских уведомлений или полностью настраиваемого контента.

Что такое модальные окна?

Модальные окна - это диалоговые окна, которые появляются поверх содержимого страницы и блокируют доступ к нему до тех пор, пока пользователь не закроет окно. Они используются для отображения важной информации, запроса подтверждения действия пользователя или отображения формы ввода.

Как устроены модальные окна Bootstrap?

Прежде чем приступить к работе с Bootstrap компонентом Modal (модальные окна), обязательно прочтите пункты ниже, т.к. некоторые параметры недавно изменились.

  • Модальные окна создаются с помощью HTML, CSS и JavaScript. Они располагаются поверх всего остального в документе и убирают прокрутку у <body>, чтобы вместо этого прокручивалось модальное содержимое.
  • Щелчок по модальному «фону» автоматически закроет модальное окно.
  • Bootstrap поддерживает одновременное открытие только одного модального окна. Вложенные модальные окна не поддерживаются, так как это неудобно для пользователей.
  • Использование модальных окон position: fixed, которые иногда могут быть немного специфичными в отношении рендеринга. По возможности размещайте модальный HTML-код на верхнем уровне, чтобы избежать потенциального вмешательства со стороны других элементов. Скорее всего, вы столкнетесь с проблемами при вложении .modal в другой фиксированный элемент.
  • Опять же, из-за position: fixed, есть некоторые предостережения при использовании модальных окон на мобильных устройствах. См. дополнительную информацию по поддержке браузеров.
  • Благодаря тому , как HTML5 определяет его семантику, атрибут HTML не имеет никакого эффекта в Bootstrap модальностей. Чтобы добиться того же эффекта, используйте собственный JavaScript: autofocus
  • Из-за того, как HTML5 определяет свою семантику, HTML атрибут autofocus не влияет на модальности начальной загрузки. Для достижения того же эффекта используйте некоторый пользовательский JavaScript:
const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})
Эффект анимации этого компонента зависит от медиа-запроса prefers-reduced-motion. См. раздел с уменьшенным движением в документации по специальным возможностям.

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

Как использовать модальные окна?

Bootstrap 5 предоставляет простой способ создания модальных окон. Для создания модального окна необходимо использовать следующий код:

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Здесь находится основной текст модального окна.</p>
      </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>

Этот код создает модальное окно с заголовком “Modal title”, текстом “Здесь находится основной текст модального окна.” и двумя кнопками в нижней части окна.

Если вы хотите открыть модальное окно по клику на кнопку или ссылку, вам нужно добавить атрибут data-bs-toggle="modal" и data-bs-target="#myModal" к элементу, который будет запускать модальное окно. Вот пример:

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Открыть demo modal
</button>

В этом примере мы используем кнопку для запуска модального окна. Мы добавляем атрибут data-bs-toggle="modal" и data-bs-target="#myModal" к кнопке, чтобы указать, что она должна запускать модальное окно с идентификатором myModal.

Живая демонстрация

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Открыть demo modal
</button>
<!-- Modal -->
<div class="modal" tabindex="-1" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Здесь находится основной текст модального окна.</p>
      </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>
Результат:

Как настроить модальные окна?

Bootstrap 5 предоставляет множество опций для настройки модальных окон. Например, вы можете изменить размер окна, добавить заголовок, изменить цвет фона и многое другое.

Изменение размеров модального окна

Модальные окна имеют три дополнительных размера, доступных через классы-модификаторы для размещения в .modal-dialog. Эти размеры устанавливаются в определенных контрольных точках, чтобы избежать горизонтальных полос прокрутки на более узких видовых экранах.

Размер Класс Максимальная ширина модала
Маленький .modal-sm 300px
По умолчанию Нет 500px
Большой .modal-lg 800px
Очень большой .modal-xl 1140px

Наш модальный класс по умолчанию без модификатора представляет собой модальный класс “среднего” размера.

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>

Полноэкранный режим окна

Другим переопределением является возможность отображения модального параметра, закрывающего область просмотра пользователя, доступного через классы-модификаторы, размещенные на .modal-dialog.

Класс Доступность
.modal-fullscreen Всегда
.modal-fullscreen-sm-down 576px
.modal-fullscreen-md-down 768px
.modal-fullscreen-lg-down 992px
.modal-fullscreen-xl-down 1200px
.modal-fullscreen-xxl-down 1400px 
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
  ...
</div>

Центрирование по вертикали

Добавьте .modal-dialog-centered к .modal-dialog для центрирования модального по вертикали.

<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</div>

Изменить анимацию

$modal-fade-transformПеременная определяет состояние преобразования в .modal-dialog перед анимацией модального перехода, переменная $modal-show-transform определяет преобразование в .modal-dialog в конце анимации модального перехода.

Если вам нужна, например, анимация увеличения, вы можете установить $modal-fade-transform: scale(.8).

Удалить анимацию

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

<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Динамические высоты

Если высота модального элемента изменяется, пока он открыт, вы должны вызвать myModal.handleUpdate() чтобы скорректировать положение модала в случае появления полосы прокрутки.

Специальные возможности

Обязательно добавьте aria-labelledby="...", ссылаясь на модальный заголовок, к .modal. Дополнительно вы можете предоставить описание вашего модального диалога с помощью aria-describedby вкл. .modal. Обратите внимание, что вам не нужно добавлять role="dialog" поскольку мы уже добавили его через JavaScript.

Различные дополнительные примеры

Прокрутка длинного содержимого

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

Вы также можете создать модал с возможностью прокрутки, который позволяет прокручивать тело модала, добавив .modal-dialog-scrollable для .modal-dialog.

<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

Всплывающие подсказки и всплывающие окна

Всплывающие подсказки и всплывающие окна могут быть размещены внутри модалов по мере необходимости. Когда модалы закрыты, все всплывающие подсказки и всплывающие окна внутри также автоматически удаляются.

<div class="modal-body">
  <h2 class="fs-5">Popover in a modal</h2>
  <p>This <button class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</button> triggers a popover on click.</p>
  <hr>
  <h2 class="fs-5">Tooltips in a modal</h2>
  <p><a href="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>
Результат:

Использование сетки

Используйте сеточную систему Bootstrap внутри модального модуля путем вложения .container-fluid внутри .modal-body. Затем используйте обычные классы grid-системы, как и в любом другом месте.

<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
      <div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ms-auto">.col-md-6 .ms-auto</div>
    </div>
    <div class="row">
      <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Изменяющийся модальный контент

Есть куча кнопок, которые запускают один и тот же modal с немного разным содержимым? Использование event.relatedTarget и HTML data-bs-* атрибуты изменять содержимое модала в зависимости от того, какая кнопка была нажата.

Ниже приведена живая демонстрация, за которой следуют примеры HTML и JavaScript. Для получения дополнительной информации, прочитайте документацию по модальным событиям для получения подробной информации о relatedTarget.

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">New message</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </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">Send message</button>
      </div>
    </div>
  </div>
</div>
Результат:
const exampleModal = document.getElementById('exampleModal')
if (exampleModal) {
  exampleModal.addEventListener('show.bs.modal', event => {
    // Button that triggered the modal
    const button = event.relatedTarget
    // Extract info from data-bs-* attributes
    const recipient = button.getAttribute('data-bs-whatever')
    // If necessary, you could initiate an Ajax request here
    // and then do the updating in a callback.

    // Update the modal's content.
    const modalTitle = exampleModal.querySelector('.modal-title')
    const modalBodyInput = exampleModal.querySelector('.modal-body input')

    modalTitle.textContent = `New message to ${recipient}`
    modalBodyInput.value = recipient
  })
}

Переключение между модалами

Переключение между несколькими режимами с помощью некоторого продуманного размещения атрибутов data-bs-target и data-bs-toggle . Например, вы могли бы переключать режим сброса пароля из уже открытого режима входа в систему. Пожалуйста, обратите внимание, что несколько модалов не могут быть открыты одновременно—этот метод просто переключает между двумя отдельными модалами.

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalToggleLabel">Modal 1</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Show a second modal and hide this one with the button below.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalToggleLabel2">Modal 2</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Скройте это модальное окно и покажите первое с помощью кнопки ниже.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Назад к первому</button>
      </div>
    </div>
  </div>
</div>
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Открыть первое модальное окно</button>
Результат:

Отключение закрытия окна по клику на фон

Если для background установлено значение static, модал не будет закрываться при нажатии за его пределами. Нажмите кнопку ниже, чтобы попробовать это.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </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">Understood</button>
      </div>
    </div>
  </div>
</div>
Результат:

Встраивание видео с YouTube

Для встраивания видео YouTube в modals требуется дополнительный JavaScript, которого нет в Bootstrap, для автоматической остановки воспроизведения и многого другого. Смотрите этот полезный пост о переполнении стека для получения дополнительной информации.

CSS

Переменные

Добавлено в версии 5.2.0

В рамках развивающегося подхода Bootstrap к CSS-переменным, модалы теперь используют локальные CSS-переменные на .modal и .modal-backdrop для расширенной настройки в режиме реального времени. Значения для переменных CSS устанавливаются через Sass, поэтому настройка Sass по-прежнему поддерживается.

--#{$prefix}modal-zindex: #{$zindex-modal};
--#{$prefix}modal-width: #{$modal-md};
--#{$prefix}modal-padding: #{$modal-inner-padding};
--#{$prefix}modal-margin: #{$modal-dialog-margin};
--#{$prefix}modal-color: #{$modal-content-color};
--#{$prefix}modal-bg: #{$modal-content-bg};
--#{$prefix}modal-border-color: #{$modal-content-border-color};
--#{$prefix}modal-border-width: #{$modal-content-border-width};
--#{$prefix}modal-border-radius: #{$modal-content-border-radius};
--#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
--#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
--#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
--#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
--#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
--#{$prefix}modal-header-border-color: #{$modal-header-border-color};
--#{$prefix}modal-header-border-width: #{$modal-header-border-width};
--#{$prefix}modal-title-line-height: #{$modal-title-line-height};
--#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
--#{$prefix}modal-footer-bg: #{$modal-footer-bg};
--#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
--#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
--#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
--#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
--#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

Переменные Sass

$modal-inner-padding:               $spacer;

$modal-footer-margin-between:       .5rem;

$modal-dialog-margin:               .5rem;
$modal-dialog-margin-y-sm-up:       1.75rem;

$modal-title-line-height:           $line-height-base;

$modal-content-color:               null;
$modal-content-bg:                  var(--#{$prefix}body-bg);
$modal-content-border-color:        var(--#{$prefix}border-color-translucent);
$modal-content-border-width:        var(--#{$prefix}border-width);
$modal-content-border-radius:       var(--#{$prefix}border-radius-lg);
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs:       var(--#{$prefix}box-shadow-sm);
$modal-content-box-shadow-sm-up:    var(--#{$prefix}box-shadow);

$modal-backdrop-bg:                 $black;
$modal-backdrop-opacity:            .5;

$modal-header-border-color:         var(--#{$prefix}border-color);
$modal-header-border-width:         $modal-content-border-width;
$modal-header-padding-y:            $modal-inner-padding;
$modal-header-padding-x:            $modal-inner-padding;
$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility

$modal-footer-bg:                   null;
$modal-footer-border-color:         $modal-header-border-color;
$modal-footer-border-width:         $modal-header-border-width;

$modal-sm:                          300px;
$modal-md:                          500px;
$modal-lg:                          800px;
$modal-xl:                          1140px;

$modal-fade-transform:              translate(0, -50px);
$modal-show-transform:              none;
$modal-transition:                  transform .3s ease-out;
$modal-scale-transform:             scale(1.02);

Циклы Sass

Адаптивные полноэкранные модальности генерируются с помощью $breakpoints карты и цикла в scss/_modal.scss.

@each $breakpoint in map-keys($grid-breakpoints) {
  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  $postfix: if($infix != "", $infix + "-down", "");

  @include media-breakpoint-down($breakpoint) {
    .modal-fullscreen#{$postfix} {
      width: 100vw;
      max-width: none;
      height: 100%;
      margin: 0;

      .modal-content {
        height: 100%;
        border: 0;
        @include border-radius(0);
      }

      .modal-header,
      .modal-footer {
        @include border-radius(0);
      }

      .modal-body {
        overflow-y: auto;
      }
    }
  }
}

Использование

Модальный плагин переключает ваш скрытый контент по запросу с помощью атрибутов данных или JavaScript. Он также переопределяет поведение прокрутки по умолчанию и генерирует .modal-backdrop, чтобы предоставить область щелчка для отклонения показанных модалов при щелчке вне модала.

Через атрибуты данных

Переключение

Активируйте модальный параметр без написания JavaScript. Установите data-bs-toggle="modal" на элементе контроллера, таком как кнопка, вместе с data-bs-target="#foo" или href="#foo" для переключения определенного модального параметра.

<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>

Отклонить

Удаление может быть достигнуто с помощью data-bs-dismiss атрибута на кнопке в модальном режиме, как показано ниже:

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

или на кнопку, находящуюся вне модального режима, используя дополнительныйdata-bs-target, как показано ниже:

<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
Хотя поддерживаются оба способа отклонения модала, имейте в виду, что отклонение модала извне не соответствует шаблону диалогового окна руководства по практике разработки ARIA (модальный). Делайте это на свой страх и риск.

Через JavaScript

Создайте модальный файл с помощью одной строки JavaScript:

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// or
const myModalAlternative = new bootstrap.Modal('#myModal', options)

Опции

Поскольку параметры могут передаваться через атрибуты данных или JavaScript, вы можете добавить имя параметра к data-bs-, как в data-bs-animation="{value}". При передаче параметров через атрибуты данных обязательно измените регистр имени опции с “camelCase” на “kebab-case”. Например, используйте data-bs-custom-class="beautifier" вместо data-bs-customClass="beautifier".

Начиная с Bootstrap 5.2.0, все компоненты поддерживают экспериментальный атрибут зарезервированных данных data-bs-config, который может содержать простую конфигурацию компонента в виде строки JSON. Когда элемент имеет атрибуты data-bs-config='{"delay":0, "title":123}' и data-bs-title="456", конечным title значением будет 456, а отдельные атрибуты данных будут переопределять значения, указанные в data-bs-config. Кроме того, существующие атрибуты данных могут содержать значения JSON, такие как data-bs-delay='{"show":0,"hide":150}'.

Конечный объект конфигурации является объединенным результатом data-bs-config, data-bs-, и js object где последнее заданное значение ключа переопределяет остальные.

Имя Тип По умолчанию Описание
backdrop логический, 'static' true Включает элемент modal-backdrop. В качестве альтернативы, укажите static для backdrop, который не закрывает модальный элемент при нажатии.
focus логический true При инициализации основное внимание уделяется модальному.
keyboard логический true Закрывает модальный режим при нажатии клавиши escape.

Методы

Все методы API являются асинхронными и запускают переход. Они возвращаются вызывающему абоненту, как только начинается переход, но до его завершения. Кроме того, вызов метода переходящего компонента будет проигнорирован. Узнайте больше в наших документах по JavaScript.

Параметры передачи

Активирует ваш контент как модальный. Принимает необязательные параметры object.

const myModal = new bootstrap.Modal('#myModal', {
  keyboard: false
})
Метод Описание
dispose Уничтожает модальный элемент. (Удаляет сохраненные данные в элементе DOM)
getInstance Статический метод, который позволяет вам получить модальный экземпляр, связанный с элементом DOM.
getOrCreateInstance Статический метод, который позволяет вам получить модальный экземпляр, связанный с элементом DOM, или создать новый, если он не был инициализирован.
handleUpdate Вручную скорректируйте положение модала, если высота модала изменяется во время его открытия (т. Е. В случае появления полосы прокрутки).
hide Скрывает модальный параметр вручную. Возвращается вызывающему до того, как модальный параметр фактически был скрыт (т.Е. До того, как произойдет hidden.bs.modal событие).
show Открывает модальный параметр вручную. Возвращается вызывающему до фактического отображения модального параметра (т.Е. До того, как произойдет shown.bs.modal событие). Кроме того, вы можете передать элемент DOM в качестве аргумента, который может быть получен в модальных событиях (как relatedTarget свойство). (т.е. const modalToggle = document.getElementById('toggleMyModal'); myModal.show(modalToggle).
toggle Вручную переключает модальный параметр. Возвращается вызывающему до того, как модальный параметр фактически был показан или скрыт (т. Е. До того, как произойдет событие shown.bs.modal или hidden.bs.modal).

Мероприятия

Модальный класс Bootstrap предоставляет несколько событий для подключения к модальной функциональности. Все модальные события запускаются в самом модале (т.е. в <div class="modal">).

Событие Описание
hide.bs.modal Это событие запускается немедленно при вызове hide метода экземпляра.
hidden.bs.modal Это событие запускается, когда модал перестает скрываться от пользователя (будет ждать завершения CSS-переходов).
hidePrevented.bs.modal Это событие запускается, когда отображается модальный объект, его фон static и выполняется щелчок вне модального объекта. Событие также запускается при нажатии клавиши escape и установке для keyboard параметра значения false.
show.bs.modal Это событие срабатывает немедленно при вызове show метода экземпляра. Если оно вызвано щелчком мыши, элемент clicked доступен как relatedTarget свойство события.
shown.bs.modal Это событие запускается, когда модал становится видимым для пользователя (будет ждать завершения CSS-переходов). Если оно вызвано щелчком мыши, элемент clicked доступен как relatedTarget свойство события. 
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // do something...
})

FAQ (ответы на часто задаваемые вопросы)

Разберем на примере HTML кода модального окна из Живой демонстрации, там у нас модальное окно с id = myModal

И чтобы его запусть, добавьте примерно вот такой JS:

// Получите ссылку на модальное окно
const myModal = new bootstrap.Modal(document.getElementById('myModal'));
// Откройте модальное
myModal.show();

Оберните выше указанную функцию запуска модалки в конструкцию:

setTimeout(() => {
  ...
}, миллисекунд);

В итоге должно получиться следующий JS:

const myModal = new bootstrap.Modal(document.getElementById('myModal'));
setTimeout(() => {
  myModal.show();
}, 5000);

Где 5000 - это 5 секунд

Bootstrap 5 предоставляет события, такие как show.bs.modal, shown.bs.modal, hide.bs.modal, hidden.bs.modal и другие. Вы можете использовать их для выполнения дополнительных действий при открытии или закрытии модального окна.

Примените свои стили к элементам внутри модального окна, используя CSS.

Заключение

Модальные окна - это важный элемент любого веб-сайта, и Bootstrap 5 предоставляет простой способ создания и настройки модальных окон. Надеюсь, этот текст помог вам лучше понять, как использовать модальные окна в Bootstrap 5.

На этой странице

  1. Что такое модальные окна?
  2. Как устроены модальные окна Bootstrap?
  3. Как использовать модальные окна?
    1. Живая демонстрация
  4. Как настроить модальные окна?
    1. Изменение размеров модального окна
      1. Полноэкранный режим окна
    2. Центрирование по вертикали
    3. Изменить анимацию
    4. Удалить анимацию
    5. Динамические высоты
    6. Специальные возможности
  5. Различные дополнительные примеры
    1. Прокрутка длинного содержимого
    2. Всплывающие подсказки и всплывающие окна
    3. Использование сетки
    4. Изменяющийся модальный контент
    5. Переключение между модалами
    6. Отключение закрытия окна по клику на фон
    7. Встраивание видео с YouTube
  6. CSS
    1. Переменные
    2. Переменные Sass
    3. Циклы Sass
  7. Использование
    1. Через атрибуты данных
      1. Переключение
      2. Отклонить
    2. Через JavaScript
    3. Опции
    4. Методы
      1. Параметры передачи
    5. Мероприятия
  8. FAQ (ответы на часто задаваемые вопросы)
  9. Заключение