Порядок применения стилей

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

Библиотека построена на jQuery, поэтому для её работы необходимо подключение jQuery перед подключением самого Featherlight.

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

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

Основная функция для вызова модального окна — $.featherlight(content, options).

  • content может быть строкой HTML, селектором или функцией, возвращающей HTML.
  • options — объект с параметрами конфигурации (например, анимации, задержки, классы и коллбэки).

Пример простого вызова:

$('#openModal').featherlight('<p>Содержимое модального окна</p>', {
    closeOnClick: 'background',
    variant: 'my-custom-class'
});

Ключевой момент: variant позволяет применять индивидуальные CSS-классы к модальному окну, что даёт гибкость при стилизации.

Структура HTML, создаваемая Featherlight

При вызове модального окна библиотека автоматически создаёт следующий HTML:

<div class="featherlight">
    <div class="featherlight-content">
        <!-- Контент вставляется сюда -->
    </div>
    <button class="featherlight-close">×</button>
</div>
  • .featherlight — основной контейнер модального окна.
  • .featherlight-content — блок для пользовательского контента.
  • .featherlight-close — кнопка закрытия окна.

Эти элементы можно использовать для точного управления стилями, задавая CSS через классы или variant.

Порядок применения стилей

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

  1. Базовые стили библиотеки (featherlight.min.css) Эти стили задают структуру, позиционирование и анимацию. Они всегда применяются первыми и формируют основу модального окна.

  2. Классы варианта (variant) Любой класс, указанный через variant в опциях, добавляется к контейнеру .featherlight. Пример:

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

    CSS:

    .featherlight.custom-style {
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 10px;
}

    Важно: свойства, заданные через variant, перекрывают базовые стили библиотеки при совпадении CSS-селекторов.

  3. Стили по селектору контента Можно задавать CSS прямо для элементов внутри .featherlight-content, например:

    .featherlight .featherlight-content p {
    font-size: 18px;
    color: #333;
}

    Эти стили применяются после стилей variant и базовых стилей.

  4. Inline-стили Если модальное окно создаётся с inline-стилями, они имеют наивысший приоритет.

    Пример:

    $.featherlight('<p style="color: red; font-weight: bold;">Важный текст</p>');

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

Кастомизация анимаций

Featherlight поддерживает CSS-анимации через классы featherlight-show и featherlight-hide. Порядок применения стилей для анимаций:

  1. Сначала применяются базовые анимации библиотеки.
  2. Классы из variant могут переопределять свойства transition и opacity.
  3. Inline-стили на элементе .featherlight или .featherlight-content имеют высший приоритет.

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

.featherlight.fade-slide {
    transform: translateY(-50px);
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.featherlight.fade-slide.featherlight-show {
    transform: translateY(0);
    opacity: 1;
}
$.featherlight('<p>Анимированное окно</p>', { variant: 'fade-slide' });

Работа с вложенными стилями и медиазапросами

  • Featherlight наследует стили родительских элементов, поэтому важно учитывать глобальные CSS-свойства страницы.
  • Для адаптивности модального окна рекомендуется использовать медиазапросы внутри variant:
.featherlight.custom-style {
    width: 600px;
}

@media (max-width: 768px) {
    .featherlight.custom-style {
        width: 90%;
    }
}

Это позволяет сохранять универсальность модального окна на всех устройствах.

Расширенные возможности через опции

  • closeOnClick — закрытие окна при клике по фону (true, 'background', 'anywhere').
  • closeIcon — замена стандартного крестика на другой HTML или иконку.
  • afterOpen, beforeClose, afterClose — коллбэки для динамической стилизации после открытия или перед закрытием.

Пример использования коллбэка для применения стилей после открытия:

$.featherlight('<p>Динамический стиль</p>', {
    afterOpen: function() {
        this.$content.css('color', 'blue');
    }
});

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

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

Оглавление