Параметр closeIcon

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

Назначение closeIcon

Параметр closeIcon определяет HTML-код или символ, который используется для отображения кнопки закрытия модального окна. По умолчанию в Featherlight используется крестик (×), расположенный в верхнем правом углу окна.

Примеры использования дефолтного значения:

$.featherlight.defaults.closeIcon; // "×"

Если требуется заменить стандартный крестик на другую иконку или HTML-элемент, closeIcon позволяет это сделать без необходимости редактировать CSS напрямую.

Настройка closeIcon при инициализации

Параметр можно передавать при создании экземпляра Featherlight через объект настроек:

$.featherlight('<p>Содержимое модального окна</p>', {
    closeIcon: '<span class="custom-close">Закрыть</span>'
});

В этом примере вместо стандартного крестика отображается текстовая кнопка с классом custom-close. Этот класс позволяет дополнительно настроить внешний вид через CSS.

Изменение глобального значения

Чтобы переопределить closeIcon для всех модальных окон на сайте, используется глобальная настройка:

$.featherlight.defaults.closeIcon = '<span class="my-close-icon">&#10006;</span>';

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

Стилизация и позиционирование

closeIcon сам по себе — это HTML-элемент, поэтому его можно стилизовать с помощью CSS:

.custom-close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 18px;
    cursor: pointer;
    color: red;
}

Важно: элемент закрытия автоматически получает обработчик клика для закрытия модального окна. Не требуется дополнительное программирование для его работы.

Особенности работы с иконками

  1. Можно использовать SVG, символы Unicode, и HTML-элементы.
  2. Featherlight автоматически добавляет к элементу класс featherlight-close для корректного позиционирования.
  3. При использовании кастомного closeIcon необходимо убедиться, что внутри HTML нет элементов, которые могут перехватывать событие click, иначе кнопка закрытия перестанет работать.

Пример с SVG-иконкой:

$.featherlight('<p>Содержимое</p>', {
    closeIcon: '<svg width="24" height="24" viewBox="0 0 24 24"><line x1="0" y1="0" x2="24" y2="24"/><line x1="24" y1="0" x2="0" y2="24"/></svg>'
});

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

Локальная замена без изменения глобального параметра

Можно передавать closeIcon только для конкретного окна. Это полезно, если на одной странице нужны разные стили кнопок закрытия:

$('#open-modal').click(function() {
    $.featherlight('<p>Особое окно</p>', {
        closeIcon: '<span class="special-close">×</span>'
    });
});

В этом случае остальные окна используют глобальный крестик, а конкретное — кастомный элемент.

Советы по использованию

  • Для совместимости с адаптивным дизайном лучше использовать символьные крестики или SVG вместо текста.
  • При кастомных HTML-элементах стоит явно задавать размеры и позицию через CSS, чтобы не нарушить макет.
  • closeIcon удобно комбинировать с другими параметрами Featherlight, например, namespace и variant, чтобы создавать тематически стилизованные модальные окна.

Параметр closeIcon является гибким инструментом управления внешним видом кнопки закрытия, позволяя легко интегрировать Featherlight в любые дизайны без изменения логики закрытия модального окна.

Оглавление