Использование с jQuery

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

Инициализация и базовое использование

Подключение Featherlight осуществляется через подключение jQuery, а затем скрипта библиотеки:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" rel="stylesheet">

Для создания простого модального окна используется метод featherlight:

$('#openModal').featherlight('<p>Пример простого модального окна</p>');

Можно также использовать селектор для привязки модального окна к ссылке:

$('a[data-featherlight]').featherlight();

В этом случае контент берётся из атрибута data-featherlight:

<a href="#" data-featherlight="#modalContent">Открыть окно</a>
<div id="modalContent" style="display:none;">
    <h2>Заголовок окна</h2>
    <p>Текст внутри модального окна.</p>
</div>

Опции и конфигурация

Featherlight предоставляет гибкую систему опций, позволяющую изменять поведение модального окна. Настройка может осуществляться как при инициализации, так и глобально.

Примеры ключевых опций:

  • variant — добавляет класс к модальному окну для кастомного оформления.
  • closeOnClick — определяет, закрывается ли окно при клике вне контента ('background', 'anywhere' или false).
  • closeOnEsc — разрешает или запрещает закрытие окна по клавише Esc.
  • beforeOpen, afterOpen, beforeClose, afterClose — функции-хуки для обработки событий открытия и закрытия.

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

$('#openModal').featherlight('<p>Текст окна</p>', {
    variant: 'custom-theme',
    closeOnClick: 'background',
    closeOnEsc: true,
    afterOpen: function() {
        console.log('Окно открылось');
    }
});

Динамическое создание и подгрузка контента

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

Пример AJAX-загрузки:

$.featherlight('/partials/modal-content.html', {
    type: 'ajax',
    afterContent: function() {
        console.log('Контент загружен и вставлен в окно');
    }
});

Можно также загружать изображения и видео, используя встроенные типы контента:

$('a.image-link').featherlight({
    type: 'image'
});

$('a.video-link').featherlight({
    iframe: 'https://www.youtube.com/embed/VIDEO_ID',
    iframeWidth: 800,
    iframeHeight: 450
});

Работа с jQuery-коллекциями

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

Пример:

$('.open-modal').featherlight(function(event) {
    return $(this).next('.hidden-content').html();
}, {
    variant: 'multi-instance'
});

Здесь контент выбирается динамически на основе текущего элемента коллекции. Такой подход удобен для списков товаров, галерей и других повторяющихся блоков.

События и кастомные обработчики

Featherlight генерирует собственные события на основе jQuery:

  • featherlight:open — перед открытием окна.
  • featherlight:opened — после открытия.
  • featherlight:close — перед закрытием.
  • featherlight:closed — после закрытия.

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

$(document).on('featherlight:opened', function(event) {
    console.log('Модальное окно полностью открыто', event.target);
});

Расширение функционала через наследование

Featherlight позволяет создавать свои подклассы для добавления специфического поведения:

var MyFeatherlight = $.featherlight.extend({
    afterOpen: function() {
        this.$content.append('<p>Дополнительный контент после открытия</p>');
    }
});

$('#openCustomModal').featherlight(MyFeatherlight, { variant: 'custom' });

Такой подход даёт возможность создавать модальные окна с уникальной логикой, не изменяя исходный код библиотеки.

Адаптивность и стилизация

Featherlight использует минимальные CSS-правила, что облегчает интеграцию с существующими стилями. Для изменения внешнего вида достаточно переопределить базовые классы .featherlight, .featherlight-content и .featherlight-close.

Пример кастомизации:

.featherlight.custom-theme {
    background-color: #222;
    color: #fff;
    border-radius: 10px;
}

.featherlight.custom-theme .featherlight-close {
    color: #ff5555;
    font-size: 1.5em;
}

Использование опции variant позволяет применять эти стили без дублирования кода и гарантирует поддержку нескольких тем на одной странице.

Интеграция с другими jQuery-плагинами

Благодаря полной совместимости с jQuery, Featherlight легко сочетается с другими плагинами: слайдерами, галереями, формами валидации. Например, можно открыть форму в модальном окне и обработать её через jQuery Validate:

$('#openForm').featherlight('#formContainer', {
    afterOpen: function() {
        $('#formContainer form').validate({
            submitHandler: function(form) {
                $.ajax({
                    url: $(form).attr('action'),
                    method: 'POST',
                    data: $(form).serialize()
                }).done(function() {
                    $.featherlight.close();
                });
            }
        });
    }
});

Преимущества интеграции с jQuery

  • Простая привязка к элементам и коллекциям.
  • Использование событий jQuery для управления модальными окнами.
  • Динамическая подгрузка и замена контента.
  • Гибкая кастомизация через опции и CSS.
  • Возможность расширения функционала без изменения исходного кода.

Featherlight сочетает минимализм и мощь jQuery, позволяя создавать адаптивные и интерактивные модальные окна для любых проектов.

Оглавление