Модификация overlay

Overlay в библиотеке Featherlight — это затемняющий слой, размещаемый поверх основного контента страницы и под модальным окном. Он решает сразу несколько задач: визуально изолирует модальное содержимое, предотвращает взаимодействие с фоном и служит дополнительной областью для обработки пользовательских событий (например, закрытие по клику).

В Featherlight overlay реализован как DOM-элемент с классом .featherlight-overlay, создаваемый и удаляемый динамически при открытии и закрытии lightbox.

Структура DOM и порядок наложения

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

<div class="featherlight-overlay"></div>
<div class="featherlight">
  <div class="featherlight-content">
    …
  </div>
</div>

Критически важные моменты:

  • Overlay и модальное окно — соседние элементы, а не вложенные
  • Порядок в DOM влияет на визуальный слой, но окончательно управляется через z-index
  • Overlay всегда располагается ниже модального окна, но выше основного контента страницы

По умолчанию используются следующие значения:

.featherlight-overlay {
  z-index: 9998;
}
.featherlight {
  z-index: 9999;
}

Базовая стилизация overlay

Стандартный overlay выглядит как полупрозрачный чёрный фон:

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

Допустима полная переопределённость внешнего вида через CSS без вмешательства в Jav * aScript:

  • изменение цвета и прозрачности
  • градиенты
  • размытие фона (через backdrop-filter)
  • анимации появления и исчезновения

Пример мягкого светлого overlay:

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

Управление overlay через JavaScript

Featherlight позволяет тонко управлять overlay через параметры и события.

Отключение overlay

Для модальных окон без затемнения:

$.featherlight(content, {
  overlay: false
});

В этом случае элемент .featherlight-overlay вообще не создаётся.

Кастомизация поведения overlay

Закрытие по клику

По умолчанию клик по overlay закрывает lightbox. Это поведение контролируется опцией closeOnClick:

$.featherlight(content, {
  closeOnClick: false
});

Теперь overlay будет полностью игнорировать клики.

Добавление собственного overlay-класса

Featherlight поддерживает механизм наследования CSS-классов через опцию className. Это влияет и на overlay.

$.featherlight(content, {
  className: 'custom-lightbox'
});

В DOM появится:

<div class="featherlight-overlay custom-lightbox"></div>

Что позволяет адресно стилизовать overlay конкретного типа модальных окон:

.featherlight-overlay.custom-lightbox {
  background: rgba(30, 30, 60, 0.85);
}

Анимация overlay

Featherlight не навязывает анимаций, но легко интегрируется с CSS transition или animation.

Пример плавного появления:

.featherlight-overlay {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.featherlight-open .featherlight-overlay {
  opacity: 1;
}

Класс .featherlight-open автоматически добавляется к html при открытии lightbox, что делает его удобной точкой входа для анимаций.

Управление overlay при нескольких модальных окнах

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

  • overlay создаётся один
  • повторные вызовы используют существующий элемент
  • z-index увеличивается автоматически

При сложных сценариях (вложенные модальные окна) возможно ручное управление:

$.featherlight.defaults.overlay = true;
$.featherlight.defaults.zIndex = 2000;

Это особенно важно при интеграции с другими библиотеками модальных окон.

Динамическое изменение overlay во время работы

Overlay доступен через текущий экземпляр Featherlight:

var instance = $.featherlight(content);

instance.$overlay.css({
  backgroundColor: 'rgba(0, 0, 0, 0.9)'
});

Это позволяет:

  • менять overlay в зависимости от содержимого
  • реагировать на пользовательские действия
  • адаптировать внешний вид под состояние приложения

Обработка событий overlay

Overlay поддерживает стандартные jQuery-события:

$(document).on('click', '.featherlight-overlay', function (e) {
  // произвольная логика
});

При этом важно учитывать:

  • Featherlight уже использует click для закрытия
  • кастомная логика должна либо дополнять, либо отменять стандартное поведение
  • для предотвращения закрытия используется e.stopImmediatePropagation()

Совмещение overlay с эффектами размытия фона

Современные браузеры позволяют использовать backdrop-filter:

.featherlight-overlay {
  backdrop-filter: blur(6px);
  background: rgba(0, 0, 0, 0.4);
}

Такой подход создаёт эффект «матового стекла», не затрагивая модальное окно.

Полное переопределение overlay

Для нестандартных интерфейсов overlay можно полностью заменить:

$.featherlight.defaults.afterOpen = function () {
  this.$overlay.remove();
};

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

Практические ограничения

  • Overlay всегда позиционируется как fixed
  • Он занимает весь viewport, игнорируя скролл
  • Изменение размеров и позиции не рекомендуется без полной замены логики

Роль overlay в доступности

Overlay блокирует фоновое взаимодействие, но не управляет фокусом. Для корректной доступности требуется дополнительная логика:

  • перевод фокуса в .featherlight-content
  • предотвращение tab-навигации за пределы модального окна
  • возврат фокуса после закрытия

Overlay в Featherlight — визуальный и событийный слой, а не полноценный accessibility-механизм.

Итоговая архитектурная роль

Overlay в Featherlight — это:

  • изолирующий визуальный слой
  • контроллер пользовательского взаимодействия
  • точка кастомизации внешнего вида
  • опора для анимаций и эффектов

Гибкость реализации позволяет адаптировать overlay под строгие дизайн-системы, сложные интерфейсы и нестандартные UX-сценарии без модификации исходного кода библиотеки.

Оглавление