Базовые стили

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

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

Для работы с Featherlight необходимы jQuery и собственный скрипт библиотеки. Минимальный набор подключений выглядит так:

<link href="https://cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.css" rel="stylesheet">
<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>

CSS-файл отвечает за визуальное оформление окна, а JS-файл — за поведение, события и управление открытием/закрытием.

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

Для базового всплывающего окна достаточно использовать HTML-атрибут data-featherlight:

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

<div id="lightbox-content" style="display: none;">
    <p>Содержимое модального окна</p>
</div>

Featherlight автоматически найдёт целевой элемент и покажет его в модальном окне при клике на ссылку. Ключевой момент: исходный элемент должен быть скрыт через display: none;, чтобы при инициализации не отображался на странице.

Настройка базовых стилей

Featherlight использует собственные CSS-классы, позволяющие настраивать внешний вид модального окна:

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

Пример базового стиля:

.featherlight {
    background: #ffffff;
    border-radius: 8px;
    padding: 20px;
    max-width: 600px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.featherlight-overlay {
    background: rgba(0, 0, 0, 0.6);
}

.featherlight-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    color: #333;
    cursor: pointer;
}

Стили можно адаптировать под дизайн страницы, изменяя цвет, размеры, отступы и анимацию.

Параметры и опции

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

  • variant — добавляет кастомный CSS-класс к окну, чтобы использовать отдельные стили.
  • closeIcon — символ или HTML для кнопки закрытия.
  • closeOnClick — управление закрытием при клике на фон ('anywhere', 'background', 'false').
  • openSpeed и closeSpeed — скорость анимации открытия и закрытия.
  • beforeOpen, afterOpen, beforeClose, afterClose — функции обратного вызова для добавления логики при открытии и закрытии.

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

$('#open-lightbox').featherlight('#lightbox-content', {
    variant: 'custom-lightbox',
    closeOnClick: 'background',
    openSpeed: 300,
    closeSpeed: 200,
    afterOpen: function() {
        console.log('Окно открыто');
    }
});

Работа с контентом

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

  1. HTML-контент — блоки на странице.
  2. Изображения — автоматически адаптируются под размер окна.
  3. AJAX-запросы — загрузка содержимого с сервера.
  4. iFrame — для встроенных страниц или видео.

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

$.featherlight({
    ajax: '/content/modal.html',
    variant: 'ajax-lightbox'
});

AJAX-контент подгружается динамически, при этом стили и анимации остаются одинаковыми для всех типов окон.

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

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

  • beforeOpen — до начала анимации открытия.
  • afterOpen — после завершения анимации.
  • beforeClose — до начала закрытия.
  • afterClose — после полного закрытия окна.

Пример регистрации событий:

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

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

Адаптивность и масштабирование

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

.featherlight {
    width: 90%;
    max-width: 500px;
    margin: auto;
}

.featherlight img {
    max-width: 100%;
    height: auto;
}

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

Интеграция с CSS-анимациями

Featherlight можно использовать вместе с CSS-анимациями для плавного появления окна:

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.featherlight.custom-lightbox {
    animation: fadeIn 0.3s ease-out;
}

Опция variant позволяет применять разные анимации для разных окон.

Итоговые рекомендации по базовым стилям

  • Использовать .featherlight для оформления контейнера и .featherlight-content для внутреннего контента.
  • Настраивать .featherlight-overlay для затемнения фона и .featherlight-close для видимой кнопки закрытия.
  • Применять variant для создания уникальных стилей для отдельных окон.
  • Управлять поведением через опции и события жизненного цикла.
  • Обеспечивать адаптивность с помощью CSS, сохраняя максимальную ширину и масштабирование изображений.

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

Оглавление