Модальные события Bootstrap 5

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

Модальные события Bootstrap 5:

• show.bs.modal: запускается, как только вызывается метод show() экземпляра.
• visible.bs.modal: запускается, когда модальный элемент полностью виден после выполнения всех переходов CSS.
• hide.bs.modal: запускается, как только вызывается метод hide() экземпляра.
• hidden.bs.modal: запускается, когда модальный элемент полностью скрыт после выполнения всех переходов CSS.
• hidePrevented.bs.modal: запускается, когда отображается модальный элемент, и пользователь щелкает фон или нажимает клавишу ESC на клавиатуре.

Синтаксис:

var myModalEl = document.getElementById("myModal")
myModalEl.addEventListener("modal_Event", function (event) {
  // do something...
})

Примеры ниже иллюстрируют модальные события Bootstrap 5:

Пример 1. В этом примере мы будем прослушивать модальные события, show.bs.modal и visible.bs.modal, которые запускаются, когда модальное окно становится видимым.

Выход:

Пример 2. В этом примере мы будем прослушивать модальные события hide.bs.modal и hidden.bs.modal, которые запускаются при закрытии модального окна.

Выход :

Ссылка: https://getbootstrap.com/docs/5.0/components/modal/#events