Сброс состояния модального окна в Bootstrap: пример кода
Быстрый ответ
Для очистки модального окна Bootstrap после его закрытия используйте событие hidden.bs.modal
, работая с jQuery. Воспользуйтесь примером:
$('#myModal').on('hidden.bs.modal', function () {
$(this).find('form').trigger('reset'); // Форма очищена!
$(this).find('.modal-body').html(''); // Мы достигли эффекта "пустого" modal-body.
});
В результате такого кода ваше модальное окно будет возвращаться к "новому" состоянию при каждом открытии.
Практические шаги для сброса модального окна
Модальное окно может содержать формы, динамически загружаемое содержимое или интерактивные элементы. Разберемся, как обновить каждый из этих компонентов:
Очистка полей формы/ввода
Если в модальных окнах присутствуют формы, они могут быть сброшены таким образом:
$('#myModal').on('hidden.bs.modal', function () {
$(this).find('form').trigger('reset'); // Форма мгновенно сбросится.
$(this).find('form')[0].reset(); // Классический способ – это альтернативный вариант сброса.
});
Поля формы будут готовы к новому заполнению с чистого листа!
Сброс динамически загруженного содержимого
Чтобы уничтожить старое содержимое, следуйте этим шагам:
$('#myModal').on('hidden.bs.modal', function () {
$(this).find('.modal-body').empty(); // Как «освобождение ума» в словах Морфеуса
$(this).removeData('bs.modal'); // Мы говорим Bootstrap: "Забудь все".
});
Управление обработчиками событий
Для предупреждения возможных проблем со специфическими обработчиками событий модального окна следует применить следующие шаги:
$('#myModal').on('hidden.bs.modal', function () {
// Удаляем ненужный 'click'.
$(this).find('.save-button').off('click');
});
Это защитит будущие взаимодействия с вашим модальным окном от прошлых событий.
Визуализация
Жизненный цикл типичного модального окна Bootstrap выглядит так:
- Открытие модального окна: "Привет, мир!".
- Пользователь видит содержимое модального окна: "Формы повсюду!".
- Закрытие модального окна: "Прощай, мир. Прощай, формы...".
- Команда открыть модальное окно снова.
- Повторное открытие модального окна: "Привет снова, но уже без старых данных!".
То есть при каждом закрытии модальное окно очищается и возвращается к первоначальному состоянию при повторном открытии.
Клонирование: шаг за пределами обычного сброса
Клонирование — это возможность модального окна Bootstrap "возродиться" при каждом новом открытии.
Подготовка к "реинкарнации"
Перед первым открытием модального окна создаем его клон.
var originalModal = $('#myModal').clone(); // Пусть модальное окно позирует.
Воссоздание из клонированной копии
В случае, если модальное окно нужно закрыть, его можно восстановить из клонированной копии.
$('#myModal').on('hidden.bs.modal', function () {
$(this).replaceWith(originalModal.clone()); // И вот оно, новое жизненное течение!
});
Примечание: Клоны удерживают события по умолчанию, так что обновленное модальное окно будет вполне функциональным!
Оптимизация производительности и совместимости
Используя методы сброса, важно учесть эффективность использования ресурсов и совместимость с разными версиями Bootstrap.
Оптимизация с помощью .empty()
$('#myModal').on('hidden.bs.modal', function () {
$(this).find('.modal-body').empty(); // Эффективная очистка содержимого модального окна
});
Совместимость
Проверьте работоспособность вашего решения в разных версиях Bootstrap и будьте готовы к изменениям в новых версиях, следуя официальной документации Bootstrap.
Полезные материалы
- Modal · Bootstrap v5.0 — Официальная документация Bootstrap.
- .on() | jQuery API Documentation — Обработка событий в jQuery.
- jquery – Twitter bootstrap remote modal shows same content every time – Stack Overflow — обсуждение на Stack Overflow.
- EventTarget: addEventListener() method – Web APIs | MDN — Основы работы с 'addEventListener' от Mozilla.
- How to hide Bootstrap modal with JavaScript? – GeeksforGeeks — Управление модальными окнами через JS от GeeksforGeeks.
- Bootstrap Blog · Official blog for the Bootstrap framework. — официальный блог Bootstrap для отслеживания свежих обновлений и изменений.