afterOpen

Featherlight — это лёгкая библиотека для создания модальных окон на сайте. Она построена поверх jQuery и минималистична по размеру, но обладает достаточной гибкостью для большинства задач. Перед использованием необходимо подключить библиотеку и её CSS-файл:

После подключения можно создавать модальные окна через вызовы $.featherlight() или через атрибуты data-featherlight у элементов.

Событие afterOpen

afterOpen — это один из ключевых колбэков в Featherlight. Оно срабатывает после того, как модальное окно полностью открылось и стало видимым на странице. Это отличное место для выполнения действий, которые зависят от того, что окно уже отрендерено, например:

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

Синтаксис использования

1. Через объект опций при создании окна

$.featherlight('
Содержимое окна
', {
    afterOpen: function(event){
        console.log('Окно открылось!');
        // this — объект Featherlight
        $(this.content()).css('color', 'blue');
    }
});

В этом примере afterOpen получает объект события event и контекст this, который является экземпляром Featherlight. Через this.content() можно обратиться к содержимому окна.

2. Через атрибуты data-featherlight

Открыть окно

Featherlight позволяет задавать колбэки через HTML-атрибуты, что упрощает организацию кода при большом количестве модальных окон.

Контекст this и объект события

Внутри функции afterOpen объект this — это экземпляр модального окна Featherlight. Он имеет следующие методы и свойства:

  • this.content() — возвращает jQuery-объект с содержимым окна, можно применять любые jQuery-методы, например find(), css(), append().
  • this.$instance — основной DOM-элемент модального окна.
  • this.$lightbox — обёртка, содержащая фон и окно.
  • this.$overlay — фон под окном.
  • event — объект события, который передается при открытии.

Пример работы с контекстом:

$.featherlight('
Пример
', {
    afterOpen: function(event){
        this.$instance.addClass('custom-lightbox');
        this.content().append('
Дополнительный текст
');
    }
});

Использование с динамическим контентом

afterOpen особенно полезно при работе с асинхронным контентом. Например, если нужно загрузить данные через AJAX:

$.featherlight('
Загрузка...
', {
    afterOpen: function(event){
        var container = this.content();
        $.ajax({
            url: '/api/data',
            method: 'GET',
            success: function(data){
                container.html(data);
            }
        });
    }
});

В этом случае afterOpen гарантирует, что модальное окно уже существует в DOM, и подставить данные можно без ошибок.

Анимации и эффекты

В сочетании с CSS-анимациями или jQuery-анимациями afterOpen позволяет запускать эффекты после полной загрузки окна, избегая визуальных артефактов. Пример с плавным появлением:

$.featherlight('
Привет!
', {
    afterOpen: function(event){
        this.content().hide().fadeIn(500);
    }
});

Практические рекомендации

  1. Всегда использовать this.content() для изменения содержимого, чтобы изменения были строго внутри модального окна.
  2. Для сложных динамических модальных окон стоит использовать afterOpen вместо beforeOpen, так как DOM уже полностью сформирован.
  3. При работе с сторонними плагинами внутри окна их инициализация должна происходить именно в afterOpen, иначе элементы могут не отрендериться корректно.
  4. Если модальные окна создаются массово через атрибуты data-featherlight, можно назначать общий обработчик afterOpen через глобальные опции:
$.featherlight.defaults.afterOpen = function(event){
    console.log('Любое окно открылось');
};

Сочетание с другими колбэками

Featherlight поддерживает цепочку колбэков:

  • beforeOpen — перед открытием.
  • afterOpen — после открытия.
  • beforeClose — перед закрытием.
  • afterClose — после закрытия.

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

Оглавление