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

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

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

Как это работает

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

Модальные окна создаются с помощью HTML, CSS и JavaScript. Они позиционируются поверх всего остального в документе и убирают прокрутку из <body>, чтобы прокручивался контент модального окна вместо этого.
Клик по "фону" модального окна автоматически закроет его.
Bootstrap поддерживает только одно модальное окно одновременно. Вложенные модальные окна не поддерживаются, так как мы считаем их плохим пользовательским опытом.
Модальные окна используют position: fixed, что иногда может быть немного капризным в рендеринге. По возможности размещайте HTML модального окна на верхнем уровне, чтобы избежать потенциальных помех от других элементов. Вы, скорее всего, столкнетесь с проблемами при вложении .modal внутрь другого фиксированного элемента.
Еще раз, из-за position: fixed, есть некоторые особенности при использовании модальных окон на мобильных устройствах. См. нашу документацию по поддержке браузеров для подробностей.
Из-за того, как HTML5 определяет свою семантику, HTML атрибут autofocus не имеет эффекта в модальных окнах Bootstrap. Для достижения того же эффекта используйте некоторый пользовательский JavaScript:

const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})

Анимационный эффект этого компонента зависит от медиа-запроса prefers-reduced-motion. См. раздел о сокращенном движении в нашей документации по доступности.

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

Примеры

Компоненты модальных окон

Ниже приведен пример статического модального окна (т.е. его position и display переопределены). Включены заголовок модального окна, тело модального окна (требуется для padding), и футер модального окна (опциональный). Мы просим вас включать заголовки модальных окон с действиями отмены, когда это возможно, или предоставлять другое явные действия отмены.

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Заголовок модального окна</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <div class="modal-body">
        <p>Текст тела модального окна идет здесь.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Сохранить изменения</button>
      </div>
    </div>
  </div>
</div>

В приведенном выше статическом примере мы используем <h5>, чтобы избежать проблем с иерархией заголовков в документации страницы. Структурно, модальное окно представляет собой отдельный документ/контекст, поэтому .modal-title должен быть идеально <h1>. Если это необходимо, вы можете использовать утилиты размера шрифта для контроля внешнего вида заголовка. Все следующие живые примеры используют этот подход.

Живой пример

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

<!-- Кнопка запуска модального окна -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Запустить демо модального окна
</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">Заголовок модального окна</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Сохранить изменения</button>
      </div>
    </div>
  </div>
</div>

Статический фон

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

<!-- Кнопка запуска модального окна -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Запустить модальное окно со статическим фоном
</button>

<!-- Модальное окно -->
<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">Заголовок модального окна</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Понятно</button>
      </div>
    </div>
  </div>
</div>

Прокручивание длинного контента

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

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

<!-- Прокручиваемое модальное окно -->
<div class="modal-dialog modal-dialog-scrollable">
  ...
</div>

Вертикальное центрирование

Добавьте .modal-dialog-centered к .modal-dialog, чтобы вертикально центрировать модальное окно.

<!-- Вертикально центрированное модальное окно -->
<div class="modal-dialog modal-dialog-centered">
  ...
</div>

<!-- Вертикально центрированное прокручиваемое модальное окно -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  ...
</div>

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

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

<div class="modal-body">
  <h2 class="fs-5">Всплывающее окно в модальном окне</h2>
  <p>Эта <button class="btn btn-secondary" data-bs-toggle="popover" title="Заголовок всплывающего окна" data-bs-content="Содержимое всплывающего окна установлено в этом атрибуте.">кнопка</button> запускает всплывающее окно при клике.</p>
  <hr>
  <h2 class="fs-5">Подсказки в модальном окне</h2>
  <p><a href="#" data-bs-toggle="tooltip" title="Подсказка">Эта ссылка</a> и <a href="#" data-bs-toggle="tooltip" title="Подсказка">та ссылка</a> имеют подсказки при наведении.</p>
</div>

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

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

<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">
        Уровень 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            Уровень 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            Уровень 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Изменение содержимого

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

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

html

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Открыть модальное окно для @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Открыть модальное окно для @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Открыть модальное окно для @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">Новое сообщение</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Получатель:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <label for="message-text" class="col-form-label">Сообщение:</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">Закрыть</button>
        <button type="button" class="btn btn-primary">Отправить сообщение</button>
      </div>
    </div>
  </div>
</div>

site/src/assets/partials/snippets.js

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. Например, вы можете переключить модальное окно сброса пароля из уже открытого модального окна входа. Обратите внимание, что несколько модальных окон не могут быть открыты одновременно—этот метод просто переключается между двумя отдельными модальными окнами.

html

<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">Модальное окно 1</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <div class="modal-body">
        Показать второе модальное окно и скрыть это с помощью кнопки ниже.
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="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">Модальное окно 2</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></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>

Изменение анимации

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

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

Удаление анимации

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

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

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

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

Доступность

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

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

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

Опциональные размеры

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

Размер	Класс	Максимальная ширина модального окна
Маленький	`.modal-sm`	`300px`
По умолчанию	None	`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>

CSS

Переменные

Добавлено в v5.2.0

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

scss/_modal.scss

--#{$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};

scss/_modal.scss

--#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
--#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
--#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};

Переменные Sass

scss/_variables.scss

$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:               var(--#{$prefix}body-color);
$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 loops

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

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">Запустить модальное окно</button>

Отмена

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

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

или на кнопке вне modal с использованием дополнительного data-bs-target, как показано ниже:

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

Хотя оба способа закрытия модального окна поддерживаются, помните, что закрытие из вне модального окна не соответствует паттерну диалогового окна (модального окна) ARIA Authoring Practices Guide. Делайте это на свой страх и риск.

Через JavaScript

Создайте модальное окно с одной строкой JavaScript:

const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
// или
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`	boolean, `’static'`	`true`	Включает элемент `modal-backdrop`. В качестве альтернативы, укажите `static`, чтобы сделать фон, который не закрывает модальное окно при нажатии.
`focus`	boolean	`true`	Устанавливает фокус на модальное окно при инициализации.
`keyboard`	boolean	`true`	Закрывает модальное окно при нажатии клавиши Escape.

Методы

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

Передача опций

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

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` экземпляра. Можно предотвратить, вызвав `event.preventDefault()`. См. документацию по событиям JavaScript для получения дополнительной информации о предотвращении событий.
`hidden.bs.modal`	Это событие срабатывает, когда модальное окно полностью скрыто от пользователя (будет ждать завершения переходов CSS).
`hidePrevented.bs.modal`	Это событие срабатывает, когда модальное окно показывается, его фон `static` и выполняется клик вне модального окна. Событие также срабатывает, когда нажимается клавиша Escape и опция `keyboard` установлена в `false`.
`show.bs.modal`	Это событие срабатывает сразу после вызова метода `show` экземпляра. Если вызвано по клику, кликнутый элемент доступен как свойство `relatedTarget` события.
`shown.bs.modal`	Это событие срабатывает, когда модальное окно сделано видимым для пользователя (будет ждать завершения переходов CSS). Если вызвано по клику, кликнутый элемент доступен как свойство `relatedTarget` события.

const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', event => {
  // сделать что-то...
})