afterClose

Featherlight — это лёгкая библиотека для реализации модальных окон на JavaScript с минимальными зависимостями. Одним из ключевых элементов управления поведением модальных окон являются события жизненного цикла, одно из которых — afterClose. Оно отвечает за действия, которые необходимо выполнить после полного закрытия окна, когда все анимации завершены и DOM-элемент скрыт или удалён.

Суть события afterClose

Событие afterClose вызывается после того, как модальное окно полностью исчезло с экрана. На этом этапе:

  • Модальное окно уже не видно пользователю.
  • Все CSS-анимации или jQuery-анимации завершены.
  • Внутренние состояния Featherlight обновлены.
  • DOM-элементы модального окна могут быть удалены, если используется настройка persist: false.

Это делает afterClose идеальным местом для действий, которые не должны выполняться во время закрытия окна, например:

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

Использование через опции

Featherlight позволяет задать обработчик события afterClose при инициализации модального окна через опцию afterClose. Формат:

$.featherlight('<p>Содержимое окна</p>', {
    afterClose: function(event) {
        console.log('Модальное окно закрыто');
        // Дополнительные действия
    }
});

В этом примере:

  • event — объект события, связанный с закрытием.
  • this внутри функции ссылается на экземпляр Featherlight, что позволяет обращаться к свойствам окна, например:
afterClose: function(event) {
    console.log(this.$content); // Содержимое окна
    console.log(this.$instance); // DOM контейнер окна
}

Использование через глобальные обработчики

Помимо локальной настройки через опции, Featherlight позволяет подписываться на события глобально, используя jQuery-события:

$(document).on('afterClose.fb', function(event, instance) {
    console.log('Модальное окно закрыто глобально');
    console.log(instance.$content); // Содержимое закрытого окна
});

Здесь:

  • afterClose.fb — название глобального события для всех экземпляров Featherlight.
  • instance — объект текущего экземпляра, аналогичный this в локальной опции.

Это полезно, когда необходимо отслеживать закрытие всех окон на странице.

Сравнение с другими событиями жизненного цикла

Featherlight поддерживает несколько событий жизненного цикла, и понимание их различий помогает использовать afterClose правильно:

Событие Когда срабатывает Примеры использования
beforeOpen Перед открытием окна Подготовка контента, изменение DOM перед показом
afterOpen После отображения окна Запуск анимаций, установка фокуса
beforeClose Перед началом закрытия Проверка условий закрытия, предупреждения
afterClose После полного закрытия окна и завершения анимаций Очистка контента, сброс состояний, удаление динамических элементов

Ключевой момент: afterClose всегда срабатывает после всех анимаций и изменений DOM, связанных с закрытием. beforeClose срабатывает до этих изменений, что делает их функционально разными.

Примеры практического применения

  1. Очистка формы после закрытия:
$.featherlight('#loginForm', {
    afterClose: function() {
        this.$content.find('input').val('');
        console.log('Форма очищена');
    }
});
  1. Удаление динамических элементов:
$.featherlight('<div class="dynamic-content">...</div>', {
    afterClose: function() {
        this.$content.remove();
        console.log('Динамический контент удалён');
    }
});
  1. Восстановление состояния страницы:
$.featherlight('<p>Дополнительная информация</p>', {
    afterClose: function() {
        $('body').removeClass('modal-open');
        console.log('Страница восстановлена после закрытия модального окна');
    }
});

Особенности и рекомендации

  • Асинхронные операции: Если требуется выполнить асинхронный код после закрытия окна, afterClose — безопасное место, так как окно уже скрыто, и это не нарушает пользовательский интерфейс.
  • Доступ к содержимому: После закрытия окно может быть удалено из DOM при persist: false. В таких случаях доступ к $content внутри afterClose всё ещё возможен, пока выполняется функция.
  • Стили и классы: Если окно меняло классы на странице (body или другие элементы), их сброс можно делать именно в afterClose, чтобы изменения не мешали анимации закрытия.

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

Оглавление