DOM-структура генерируемых элементов

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

Основная структура

При инициализации модального окна Featherlight создаёт в DOM следующую иерархию элементов:

<div class="featherlight-overlay">
    <div class="featherlight">
        <div class="featherlight-content">
            <!-- Контент модального окна -->
        </div>
    </div>
</div>
  • featherlight-overlay — затемнённый фон, который перекрывает основной контент страницы. Этот элемент обеспечивает базовую обработку кликов по фону для закрытия окна и служит визуальным слоем, выделяющим модальное окно.
  • featherlight — контейнер модального окна. Он располагается поверх overlay и содержит основной блок контента.
  • featherlight-content — элемент, в котором непосредственно отображается контент, переданный в окно (HTML, текст, изображения или динамически загружаемые элементы).

Генерация контента

Контент в featherlight-content может быть:

  1. HTML-кодом Передается в виде строки, например:

    $.featherlight('<p>Пример текста</p>');

    Featherlight автоматически создаёт элемент div.featherlight-content и вставляет внутрь переданный HTML.

  2. Ссылкой на DOM-элемент В этом случае библиотека клонирует или перемещает указанный элемент внутрь featherlight-content. При использовании клонирования исходный элемент остаётся на месте, а в модальном окне отображается его копия.

  3. AJAX-запросом Можно передавать URL, по которому загружается содержимое. Featherlight создаёт контейнер и вставляет загруженный контент внутрь featherlight-content после успешного запроса.

  4. Функцией Передача функции позволяет динамически формировать содержимое окна в момент его открытия. Функция должна возвращать HTML или DOM-элемент.

Классы и кастомизация

Каждому элементу присвоены классы по умолчанию:

  • featherlight-overlay — для стилизации фона и управления анимацией.
  • featherlight — основной контейнер окна. Можно добавить собственные классы через опцию namespace.
  • featherlight-content — для стилизации и позиционирования контента.

Дополнительно библиотека поддерживает настройку namespace:

$.featherlight('<p>Контент</p>', { namespace: 'custom-lightbox' });

В результате структура будет:

<div class="custom-lightbox-overlay">
    <div class="custom-lightbox">
        <div class="custom-lightbox-content">
            <p>Контент</p>
        </div>
    </div>
</div>

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

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

Featherlight добавляет следующие атрибуты к элементам:

  • tabindex="-1" на overlay для корректной работы фокусировки при закрытии и открытии окна.
  • aria-hidden="true" и role="dialog" для соблюдения принципов доступности (ARIA).
  • data-атрибуты на контенте, если используется привязка к существующему элементу DOM (data-featherlight).

События DOM позволяют перехватывать жизненный цикл окна:

  • beforeOpen — перед созданием и вставкой элементов.
  • afterOpen — после добавления модального окна в DOM.
  • beforeClose — перед удалением элементов.
  • afterClose — после удаления элементов из DOM.

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

Работа с вложенными элементами

Featherlight корректно обрабатывает вложенные структуры. Любые элементы, вставленные в featherlight-content, сохраняют свои собственные обработчики событий и стили. Если требуется интерактивность внутри окна (формы, слайдеры, галереи), достаточно создать их внутри контейнера. Featherlight автоматически управляет overlay и позиционированием, не мешая внутренней логике.

Управление через jQuery

Так как Featherlight построен на jQuery, все созданные элементы можно получить и манипулировать ими через стандартные методы:

var fl = $.featherlight('<p>Контент</p>');
var contentDiv = fl.$content; // jQuery объект featherlight-content
fl.$overlay.addClass('custom-overlay'); // добавить класс к overlay

$overlay, $instance, $content — основные свойства, через которые осуществляется доступ к DOM-структуре.

Анимации и переходы

DOM-структура позволяет подключать CSS-анимации через классы featherlight-show и featherlight-hide. Overlay и контейнер модального окна получают соответствующие состояния при открытии и закрытии, что обеспечивает плавные визуальные эффекты без дополнительного вмешательства в скрипт.

Итоговая модель DOM

Полная иерархия элементов для стандартного окна:

<div class="featherlight-overlay" tabindex="-1" aria-hidden="true">
    <div class="featherlight" role="dialog">
        <div class="featherlight-content">
            <!-- Контент -->
        </div>
    </div>
</div>

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

Оглавление