Разметка HTML

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

Структура модального окна

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

Простейший пример:

<a href="#modal-content" data-featherlight>Открыть окно</a>

<div id="modal-content" style="display:none;">
    <h2>Заголовок модального окна</h2>
    <p>Содержимое окна. Может быть текст, изображения или любой HTML-код.</p>
</div>

Ключевые моменты:

  • Атрибут data-featherlight указывает, что элемент является триггером.
  • Значение href может быть ID блока (#modal-content) или URL изображения.
  • Контейнер модального окна (div) изначально скрыт через display:none.

Типы контента

Featherlight поддерживает несколько типов контента:

  1. HTML-контент: как показано выше, можно передавать любой HTML-блок, скрытый в документе.
  2. Изображения: достаточно указать href на URL изображения. Featherlight автоматически определяет тип и создаёт контейнер с изображением.
<a href="image.jpg" data-featherlight="image">Посмотреть изображение</a>
  1. AJAX-контент: можно подгружать содержимое через AJAX-запрос.
<a href="/modal-content.html" data-featherlight="ajax">Загрузить контент</a>
  1. iFrame: для встраивания стороннего контента.
<a href="https://example.com" data-featherlight="iframe">Открыть iFrame</a>

Настройка контейнера через HTML

Featherlight позволяет настраивать класс контейнера и его стили напрямую через HTML:

<a href="#modal-custom" data-featherlight data-featherlight-class="custom-lightbox">
    Открыть окно с кастомным классом
</a>

<div id="modal-custom" style="display:none;">
    <p>Содержимое с индивидуальным стилем.</p>
</div>
  • Атрибут data-featherlight-class добавляет собственный CSS-класс к модальному окну.
  • Это позволяет задавать фон, размеры или анимацию через CSS.

Вложенные элементы и динамический контент

В случае сложных интерфейсов Featherlight позволяет использовать динамический контент внутри модального окна:

<a href="jav * ascript:;" data-featherlight="#dynamic-content">Открыть динамическое окно</a>

<div id="dynamic-content" style="display:none;">
    <form id="modal-form">
        <label>Имя:</label>
        <input type="text" name="name">
        <button type="submit">Отправить</button>
    </form>
</div>
  • Любой HTML внутри контейнера будет корректно отображён.
  • Можно включать формы, таблицы, списки, интерактивные элементы.

Организация множественных модальных окон

Featherlight поддерживает несколько модальных окон на одной странице. Каждый триггер может указывать на отдельный контейнер:

<a href="#modal-one" data-featherlight>Окно 1</a>
<a href="#modal-two" data-featherlight>Окно 2</a>

<div id="modal-one" style="display:none;">Содержимое первого окна</div>
<div id="modal-two" style="display:none;">Содержимое второго окна</div>
  • ID контейнеров должны быть уникальными.
  • Стили и анимации могут быть общими или индивидуальными через классы.

Доступность и семантика

Для корректной работы модальных окон важно сохранять семантику HTML:

  • Использовать теги <button> для триггеров, если они не являются ссылками.
  • Скрыв контейнеры через display:none вместо удаления из DOM, чтобы контент оставался доступным для вспомогательных технологий.
  • Использовать заголовки <h2>–<h3> внутри окна для структуры контента.

Вывод

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

Оглавление