Инициализация через JavaScript

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

Подключение библиотеки

Для работы с Featherlight требуется подключение двух основных файлов: CSS и JavaScript. Обычно это выглядит так:

<link href="featherlight.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="featherlight.min.js"></script>

Важно, чтобы jQuery был подключен до Featherlight, так как библиотека полностью зависит от него.

Основной метод инициализации

Инициализация через JavaScript осуществляется с помощью функции $.featherlight(). Синтаксис базового вызова:

$.featherlight(content, options);
  • content — содержимое модального окна. Может быть строкой HTML, селектором DOM-элемента, jQuery-объектом или функцией, возвращающей содержимое.
  • options — объект настроек, позволяющий изменять поведение окна, анимацию, закрытие и другие параметры.

Пример простой инициализации с HTML-контентом:

$.featherlight('<p>Привет, мир!</p>');

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

Можно передавать селектор DOM-элемента, содержимое которого будет отображено в модальном окне:

$.featherlight($('#myContent'));

В этом случае содержимое элемента #myContent будет скопировано в модальное окно. Featherlight автоматически клонирует содержимое, сохраняя исходный элемент на странице.

Настройки через объект options

Featherlight поддерживает обширный набор параметров, позволяющих тонко настраивать поведение модального окна. Основные из них:

  • variant — добавляет пользовательский CSS-класс к окну, позволяя изменять стили через CSS.
  • closeOnClick — определяет, закрывается ли окно при клике вне него. Возможные значения: 'background', 'anywhere', false.
  • closeOnEsc — логическое значение, указывающее, можно ли закрыть окно с помощью клавиши Esc.
  • openSpeed и closeSpeed — скорость анимации открытия и закрытия (в миллисекундах или 'fast', 'slow').
  • afterOpen, beforeClose, afterClose — колбэки, выполняющиеся на соответствующих этапах жизненного цикла окна.

Пример использования настроек:

$.featherlight('<p>Контент с настройками</p>', {
    variant: 'custom-lightbox',
    closeOnClick: 'background',
    closeOnEsc: true,
    openSpeed: 300,
    afterOpen: function() {
        console.log('Модальное окно открыто');
    }
});

Инициализация для группы элементов

Для одинакового поведения нескольких элементов можно использовать селекторы и метод .featherlight() на jQuery-объекте:

$('.lightbox-trigger').featherlight({
    variant: 'gallery-lightbox',
    closeOnClick: 'anywhere'
});

Каждый элемент с классом lightbox-trigger при клике будет открывать отдельное модальное окно. При этом содержимое может быть указано через атрибут data-featherlight или передано через опцию target.

Загрузка внешнего контента

Featherlight поддерживает динамическую загрузку контента через AJAX. Для этого в качестве content можно указать URL, а библиотека подгрузит HTML по указанному адресу:

$.featherlight('content.html', {
    ajax: {
        type: 'GET',
        dataType: 'html'
    },
    afterOpen: function() {
        console.log('Контент загружен через AJAX');
    }
});

Также можно использовать функцию для динамической генерации контента:

$.featherlight(function() {
    return '<p>Сгенерированный контент: ' + new Date().toLocaleTimeString() + '</p>';
});

Программное закрытие модального окна

Любое окно Featherlight, открытое через JavaScript, можно закрыть программно с помощью метода close:

var instance = $.featherlight('<p>Закрытие через JS</p>');
// через 2 секунды закрываем окно
setTimeout(function() {
    instance.close();
}, 2000);

Работа с экземплярами и контекстом

Каждый вызов $.featherlight() возвращает объект экземпляра, который содержит доступ ко всем внутренним методам и параметрам. Внутри колбэков доступна переменная this, указывающая на текущий экземпляр:

$.featherlight('<p>Контент с контекстом</p>', {
    afterOpen: function() {
        console.log(this.$content); // jQuery-объект с контентом окна
        console.log(this.$instance); // контейнер всего модального окна
    }
});

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

Интеграция с другими библиотеками

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

Основные рекомендации при инициализации через JS

  • Всегда проверять, что jQuery загружен до Featherlight.
  • Для динамически генерируемого контента использовать функции или AJAX-вызовы.
  • Использовать variant для отдельной стилизации разных окон на одной странице.
  • Программное закрытие через instance.close() обеспечивает гибкое управление интерфейсом.
  • Колбэки afterOpen и afterClose позволяют интегрировать дополнительные действия без изменения внутреннего кода библиотеки.

Инициализация через JavaScript является мощным инструментом управления модальными окнами Featherlight, предоставляя полный контроль над содержимым, поведением и визуальной презентацией.

Оглавление