Метод open

Метод open является центральным механизмом библиотеки Featherlight и отвечает за программное открытие модального окна (lightbox). В отличие от декларативного подхода через HTML-атрибуты (data-featherlight), open позволяет полностью контролировать момент открытия, тип контента, параметры отображения и жизненный цикл модального окна из JavaScript-кода.

open используется как для простых сценариев (открытие изображения или HTML-фрагмента), так и для сложных динамических случаев: асинхронная загрузка данных, интеграция с формами, SPA-архитектура, вложенные окна.

Сигнатура метода

$.featherlight.open(content, options);

Метод является статическим и вызывается через пространство имён $.featherlight.

Аргументы:

  • content — источник контента, который будет отображён в модальном окне
  • options — объект конфигурации, переопределяющий стандартные настройки

Метод возвращает экземпляр Featherlight, представляющий конкретное открытое окно.

Аргумент content

Тип аргумента content определяет, каким образом Featherlight интерпретирует данные и какой загрузчик будет использован.

Строка

Наиболее универсальный вариант.

$.featherlight.open('<p>Простой HTML-контент</p>');

В зависимости от содержимого строки Featherlight автоматически выбирает загрузчик:

  • HTML-разметка → html
  • CSS-селектор (#block) → jquery
  • URL изображения → image
  • URL страницы → ajax или iframe (в зависимости от настроек)

Пример с селектором:

$.featherlight.open('#modalContent');

DOM-элемент или jQuery-объект

var element = document.getElementById('content');
$.featherlight.open(element);

или

$.featherlight.open($('#content'));

Контент временно перемещается внутрь lightbox и после закрытия возвращается обратно на исходное место в DOM.

Функция

Позволяет динамически формировать контент во время открытия.

$.featherlight.open(function() {
    return '<strong>Динамический контент</strong>';
});

Функция может возвращать строку, DOM-элемент или jQuery-объект.

Аргумент options

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

$.featherlight.open('content', {
    closeOnClick: false,
    closeOnEsc: true
});

Управление загрузчиком через options

Можно принудительно указать тип загрузчика:

$.featherlight.open('page.html', {
    type: 'ajax'
});

Поддерживаемые значения type:

  • html
  • image
  • ajax
  • iframe
  • jquery

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

Использование open для AJAX-загрузки

$.featherlight.open('data/content.html', {
    type: 'ajax',
    ajax: {
        cache: false
    }
});

Контент загружается асинхронно, при этом Featherlight автоматически управляет состоянием загрузки и вставкой результата в контейнер.

Использование open для iframe

$.featherlight.open('https://example.com', {
    type: 'iframe',
    iframeWidth: 800,
    iframeHeight: 600
});

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

Возвращаемое значение

Метод open возвращает объект Featherlight:

var instance = $.featherlight.open('content');

Этот объект предоставляет доступ к внутреннему состоянию окна и его методам.

Управление экземпляром Featherlight

Через возвращённый экземпляр можно:

Закрыть окно программно

instance.close();

Получить доступ к DOM-элементам

instance.$instance;   // корневой элемент lightbox
instance.$content;    // контейнер с контентом

Это используется для дополнительной стилизации или логики взаимодействия.

Повторное открытие и множественные окна

Каждый вызов open создаёт новый экземпляр Featherlight:

$.featherlight.open('Первое окно');
$.featherlight.open('Второе окно');

По умолчанию допускается только одно активное окно. Предыдущее автоматически закрывается, если не включена поддержка вложенных окон через конфигурацию.

Обработчики событий при использовании open

События могут задаваться через options:

$.featherlight.open('content', {
    afterOpen: function() {
        console.log('Окно открыто');
    },
    afterClose: function() {
        console.log('Окно закрыто');
    }
});

Контекст this внутри обработчиков указывает на текущий экземпляр Featherlight.

Передача пользовательских данных

В options можно передавать произвольные данные:

$.featherlight.open('content', {
    customData: 42,
    afterOpen: function() {
        console.log(this.customData);
    }
});

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

Типичные сценарии использования метода open

  • Открытие модального окна по результату AJAX-запроса
  • Генерация контента на основе состояния приложения
  • Использование Featherlight как универсального контейнера для UI-компонентов
  • Интеграция с фреймворками без привязки к HTML-разметке

Метод open делает Featherlight не просто lightbox-библиотекой, а полноценным инструментом для управления модальными интерфейсами на уровне JavaScript-логики.

Оглавление