Сброс состояния модального окна в 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 выглядит так:

1. Открытие модального окна: "Привет, мир!".
2. Пользователь видит содержимое модального окна: "Формы повсюду!".
3. Закрытие модального окна: "Прощай, мир. Прощай, формы...".
4. Команда открыть модальное окно снова.
5. Повторное открытие модального окна: "Привет снова, но уже без старых данных!".

То есть при каждом закрытии модальное окно очищается и возвращается к первоначальному состоянию при повторном открытии.

Клонирование: шаг за пределами обычного сброса

Клонирование — это возможность модального окна 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.

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

1. Modal · Bootstrap v5.0 — Официальная документация Bootstrap.
2. .on() | jQuery API Documentation — Обработка событий в jQuery.
3. jquery – Twitter bootstrap remote modal shows same content every time – Stack Overflow — обсуждение на Stack Overflow.
4. EventTarget: addEventListener() method – Web APIs | MDN — Основы работы с 'addEventListener' от Mozilla.
5. How to hide Bootstrap modal with JavaScript? – GeeksforGeeks — Управление модальными окнами через JS от GeeksforGeeks.
6. Bootstrap Blog · Official blog for the Bootstrap framework. — официальный блог Bootstrap для отслеживания свежих обновлений и изменений.