Параметр closeOnEsc

Библиотека Featherlight предоставляет лёгкий и гибкий способ создания модальных окон на сайте. Одним из ключевых параметров настройки поведения модального окна является closeOnEsc. Этот параметр отвечает за возможность закрытия всплывающего окна при нажатии клавиши Escape на клавиатуре.

Назначение параметра

closeOnEsc определяет, реагирует ли Featherlight на нажатие клавиши Esc. По умолчанию значение равно true, что означает, что модальное окно автоматически закроется, когда пользователь нажмёт Escape. Если параметр установлен в false, модальное окно останется открытым, игнорируя клавиатурное событие.

Синтаксис при инициализации:

$.featherlight(element, {
    closeOnEsc: true // или false
});
  • element — селектор или объект, который будет отображён в модальном окне.
  • closeOnEsc — булевый параметр, определяющий поведение окна при нажатии Escape.

Применение в конфигурации по умолчанию

Featherlight позволяет задавать глобальные параметры, которые будут применяться ко всем модальным окнам на странице. closeOnEsc может быть определён глобально через объект $.featherlight.defaults:

$.featherlight.defaults.closeOnEsc = false;

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

Локальная переопределяемость

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

$('#openModal').click(function(){
    $.featherlight('<p>Контент окна</p>', {
        closeOnEsc: false
    });
});

В этом примере глобальный параметр может быть true, но конкретное окно игнорирует Escape.

Связь с другими параметрами

  • closeOnClick: отвечает за закрытие окна при клике на фон или внутри окна. Использование closeOnEsc: false не влияет на closeOnClick. Эти параметры работают независимо.
  • afterClose и beforeClose: позволяют выполнять дополнительные действия при закрытии окна. Если Escape отключён, события beforeClose и afterClose не срабатывают при нажатии клавиши.

Обработка клавиатурных событий

Featherlight использует событие keydown для отслеживания Escape:

$(document).on('keydown.featherlight', function(event) {
    if (event.key === 'Escape' && instance.opts.closeOnEsc) {
        instance.close();
    }
});

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

  • Событие привязано к документу.
  • Проверяется свойство event.key, а не keyCode, что обеспечивает поддержку современных стандартов.
  • Метод close() вызывается только если closeOnEsc равен true.

Примеры использования

  1. Модальное окно, которое нельзя закрыть Escape:
$.featherlight('<p>Важно! Закрывать только кнопкой.</p>', {
    closeOnEsc: false
});
  1. Комбинированное управление:
$.featherlight('<p>Закрывается только кликом по крестику.</p>', {
    closeOnEsc: false,
    closeOnClick: 'overlay'
});

В этом случае Escape не закрывает окно, но клик по затемнённой области (overlay) — закрывает.

Практические рекомендации

  • Для информационных уведомлений и простых галерей удобно оставлять closeOnEsc: true.
  • Для критичных форм или предупреждений рекомендуется closeOnEsc: false, чтобы пользователь не закрыл окно случайно.
  • В сочетании с afterClose можно реализовать логику очистки формы или сохранения состояния при закрытии.

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

Оглавление