Вызов JavaScript функции при открытии Bootstrap модала

Быстрый ответ

Если вам требуется запустить функцию перед показом модального окна Bootstrap, используйте событие show.bs.modal:

$('#yourModal').on('show.bs.modal', function() {
  myFunction(); // Здесь вызываем вашу функцию
});

Обратите внимание, что '#yourModal' соответствует ID модального окна. Функция myFunction выполнится перед открытием модального окна.

Подробное руководство

Вариант выполнения функции после отображения модального окна

Вы можете вызывать функцию сразу после показа модального окна, подписавшись на событие shown.bs.modal:

$('#yourModal').on('shown.bs.modal', function() {
  console.log("Я – король мира!"); // Введите вашу функцию здесь
});

Для версий Bootstrap до 3.0 вам потребуется использовать событие shown вместо этого.

Подробнее об этом расскажет наш спикер на видео

Обработка динамического содержимого

Если содержимое модального окна заполняется динамически, например, через AJAX, то уместно выбрать делегированную обработку событий:

$(document).on('shown.bs.modal', '#yourModal', function() {
  console.log("Мама, я динамичен!"); // Определите функцию здесь
});

Обработка закрытия модального окна

Чтобы выполнить дополнительные действия после закрытия модального окна, используйте событие hidden.bs.modal:

$('#yourModal').on('hidden.bs.modal', function() {
  console.log("Чисто как у свистка!"); // Здесь будет функция очистки
});

Контроль времени выполнения

Выберите событие show.bs.modal, если ваша функция должна выполниться непосредственно перед открытием модального окна:

$('#yourModal').on('show.bs.modal', function(e) {
  console.log("Заметил айсберг!"); // Функция, которую нужно вызвать перед открытием модального окна
});

Визуализация

Продумав визуализацию, представьте модальное окно Bootstrap в роли театрального занавеса, а функции – как подготовленных работников за кулисами:

Занавес опущен 🎭: Модальное окно закрыто, актёры готовятся к выходу.

Когда занавес поднимается (открывается модальное окно):

🎭🎬: Работники за кулисами (функции) завершают подготовку, вся внимательность – на сцене!

Зрители (пользователи) ожидают начала представления.

Занавес поднят (👏): [Функции приступают к работе]

Дополнительные соображения

События для всех модальных окнах

Вы можете назначить событие на $(window), если управляете всеми модальными окнами одновременно:

$(window).on('shown.bs.modal', function() {
  console.log("Весь мир – театр, а мы в нём актёры."); // Здесь может быть глобальная функция
});

Отладка через console.log или alert

Вот простой и эффективный способ подтвердить, что ваши функции работают корректно:

$('#yourModal').on('shown.bs.modal', function() {
  console.log("Не все, кто странствуют, заблудились."); // Сообщение для отладки
});

Чистота кода

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

Будьте готовы к изменениям

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

Полезные материалы

1. Modal · Bootstrap v5.0
2. .on() | jQuery API Документация
3. Наложение нескольких модальных окон — Stack Overflow
4. Метод EventTarget: addEventListener() — Веб-API | MDN
5. Bootstrap: работа с модальными окнами
6. Как использовать модальные окна в Bootstrap 5 — Tutorial Republic
7. Пример на CodePen — События модального окна Bootstrap в действии