Vanilla JavaScript без jQuery

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

Для подключения необходимо добавить CSS и JS файлы библиотеки в проект:

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

Важно подключать CSS перед JS, чтобы стили модального окна корректно применялись при инициализации. В версии для Vanilla JS используется экспорт класса Featherlight через ES-модули.

Инициализация модального окна

Создание модального окна в чистом JavaScript отличается от jQuery-версии. Основной класс Featherlight предоставляет конструктор и набор методов для управления состоянием окна.

import Featherlight from './featherlight.min.js';

const modal = new Featherlight('<p>Содержимое модального окна</p>');

При передаче строки в конструктор создаётся динамическое окно с указанным HTML.

Можно также передавать DOM-элемент:

const content = document.querySelector('#modal-content');
const modal = new Featherlight(content);

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

Открытие и закрытие

Для управления окном используются методы open() и close():

modal.open();   // открывает окно
modal.close();  // закрывает окно

Дополнительно поддерживается toggle() для переключения состояния. Эти методы позволяют контролировать модальные окна программно, без привязки к кнопкам или ссылкам.

Настройка параметров

Featherlight предоставляет объект конфигурации options. Основные параметры:

  • variant — добавляет кастомный CSS-класс к модальному окну;
  • persist — если true, содержимое сохраняется между открытиями;
  • closeOnClick — определяет поведение при клике на фон (background, anywhere, false);
  • beforeOpen, afterOpen, beforeClose, afterClose — коллбеки на соответствующие события.

Пример конфигурации:

const modal = new Featherlight('<p>Пример окна</p>', {
    variant: 'custom-lightbox',
    persist: true,
    closeOnClick: 'background',
    afterOpen: function() {
        console.log('Окно открыто');
    }
});

Встраивание триггеров

Featherlight позволяет автоматически связывать элементы с модальными окнами через атрибуты data-featherlight:

<a href="#inline-content" data-featherlight="inline">Открыть окно</a>
<div id="inline-content" style="display:none;">
    <p>Содержимое скрытого блока</p>
</div>

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

В Vanilla JS можно вручную добавить обработчики:

document.querySelector('#open-btn').addEventListener('click', () => {
    new Featherlight('<p>Окно открыто через кнопку</p>');
});

Работа с изображениями и галереями

Featherlight поддерживает тип image для создания легких галерей:

<a href="img1.jpg" data-featherlight="image">Изображение 1</a>
<a href="img2.jpg" data-featherlight="image">Изображение 2</a>

Для группировки изображений в галерею используется атрибут data-featherlight-gallery:

<a href="img1.jpg" data-featherlight="image" data-featherlight-gallery="gallery">1</a>
<a href="img2.jpg" data-featherlight="image" data-featherlight-gallery="gallery">2</a>

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

Управление контентом динамически

Featherlight позволяет изменять содержимое уже открытого окна через метод instance() и свойство content:

const modal = new Featherlight('<p>Первоначальный текст</p>');
modal.open();
modal.instance().content.innerHTML = '<p>Обновлённый текст</p>';

Это удобно для реализации форм, уведомлений или загрузки данных через AJAX.

Поддержка событий

Featherlight генерирует события, на которые можно подписаться с помощью addEventListener:

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

Пример:

document.addEventListener('featherlight:opened', function(e) {
    console.log('Модальное окно открылось', e);
});

Адаптация под мобильные устройства

Featherlight автоматически обрабатывает тач-события и масштабирование. Для дополнительного контроля можно использовать CSS-переменные и классы, чтобы изменять размер и положение окна:

.featherlight.custom-lightbox {
    max-width: 90%;
    max-height: 80%;
}

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

Оптимизация производительности

  • Ленивая загрузка контента: создавать окно только при необходимости, чтобы не загружать DOM заранее.
  • Кеширование элементов через persist: true снижает количество операций DOM.
  • Удаление слушателей после закрытия для долгоживущих приложений.

Расширение функционала

Библиотека легко расширяется через наследование класса Featherlight:

class FeatherlightForm extends Featherlight {
    constructor(content, options) {
        super(content, options);
    }

    afterOpen() {
        super.afterOpen();
        this.content.querySelector('input').focus();
    }
}

const formModal = new FeatherlightForm('<input type="text">', {});
formModal.open();

Это позволяет добавлять новые поведения, не изменяя исходный код библиотеки.

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

Оглавление