Модификация кнопки закрытия

Featherlight по умолчанию добавляет кнопку закрытия (close icon) автоматически, но библиотека предоставляет достаточно гибкие механизмы для её изменения — от простого редактирования текста до полной замены HTML-структуры и логики поведения.

После инициализации Featherlight внутрь модального окна добавляется элемент:

<span class="featherlight-close-icon featherlight-close">✕</span>

Кнопка является частью контейнера .featherlight-content и обрабатывается через делегирование событий. Закрытие происходит по клику на элемент с классом featherlight-close.

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

  • используется span, а не button
  • закрытие реализовано через event delegation
  • элемент создаётся динамически, а не присутствует в DOM заранее

Изменение текста или символа кнопки

Самый простой способ модификации — переопределение опции closeIcon.

$.featherlight(content, {
    closeIcon: 'Закрыть'
});

Допускается использование HTML:

closeIcon: '<span class="my-close">×</span>'

В этом случае Featherlight не экранирует строку и вставляет её напрямую в DOM. Это позволяет:

  • использовать иконки (SVG, Font Awesome)
  • добавлять обёртки
  • применять собственные классы

Полное отключение стандартной кнопки

Если кнопка закрытия не требуется, её можно отключить:

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

При этом:

  • элемент .featherlight-close-icon не создаётся
  • закрытие по клику вне окна и по ESC остаётся активным
  • управление закрытием полностью переносится на пользовательскую логику

Замена кнопки на кастомный HTML внутри контента

Распространённый подход — убрать стандартную кнопку и добавить собственную в HTML контента.

$.featherlight(
    '<div class="modal">' +
        '<button class="custom-close">×</button>' +
        '<p>Контент</p>' +
    '</div>',
    { closeIcon: false }
);

Закрытие в этом случае выполняется вручную:

$(document).on('click', '.custom-close', function () {
    $.featherlight.current().close();
});

Метод $.featherlight.current() возвращает текущий активный экземпляр, что важно при работе с несколькими окнами.

Изменение поведения кнопки закрытия

По умолчанию кнопка:

  • немедленно закрывает окно
  • не имеет анимации
  • не проверяет условия

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

$.featherlight(content, {
    beforeClose: function () {
        return confirm('Закрыть окно?');
    }
});

Если обработчик возвращает false, закрытие отменяется. Это работает и для кнопки, и для ESC, и для клика по фону.

Переопределение HTML-шаблона кнопки глобально

Featherlight позволяет изменить шаблон сразу для всех модальных окон:

$.featherlight.defaults.closeIcon = '<button class="fl-close">×</button>';

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

Кастомизация через CSS

Кнопка закрытия стилизуется классами:

  • .featherlight-close-icon
  • .featherlight-close

Пример полной визуальной замены без изменения HTML:

.featherlight-close-icon {
    font-size: 0;
    width: 32px;
    height: 32px;
    background: url(close.svg) center / contain no-repeat;
}

При этом логика закрытия остаётся неизменной.

Перемещение кнопки в другую часть окна

Так как кнопка создаётся после открытия окна, перемещение выполняется через хук afterOpen.

$.featherlight(content, {
    afterOpen: function () {
        this.$instance
            .find('.featherlight-close-icon')
            .appendTo(this.$content);
    }
});

this.$instance — корневой контейнер окна, this.$content — контейнер с пользовательским контентом.

Удаление кнопки после открытия

Иногда требуется динамически скрывать кнопку при определённых условиях:

afterOpen: function () {
    if (someCondition) {
        this.$instance.find('.featherlight-close-icon').remove();
    }
}

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

Добавление анимации закрытия

Анимация реализуется не через кнопку напрямую, а через класс состояния .featherlight-closing.

.featherlight.featherlight-closing .featherlight-content {
    animation: fadeOut 0.3s forwards;
}

Кнопка автоматически участвует в этом процессе, так как инициирует стандартный механизм закрытия.

Связь кнопки закрытия с доступностью

Featherlight не добавляет aria-label по умолчанию. Для улучшения доступности его можно внедрить через кастомный HTML:

closeIcon: '<button aria-label="Закрыть">×</button>'

Также рекомендуется:

  • использовать button, а не span
  • обеспечивать фокусируемость
  • учитывать навигацию с клавиатуры

Перехват клика по кнопке

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

$(document).on('click', '.featherlight-close', function () {
    console.log('Кнопка нажата');
});

Важно не вызывать event.preventDefault(), иначе стандартное закрытие не произойдёт.

Итоговая архитектура модификации

Основные уровни кастомизации:

  • конфигурация (closeIcon, beforeClose)
  • DOM-манипуляции (afterOpen)
  • CSS-переопределения
  • ручное управление экземпляром

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

Оглавление