Закрытие по клавише Escape

Основной задачей при реализации модальных окон является удобство взаимодействия с пользователем. Одна из важных особенностей, которую стоит учесть, — возможность закрытия окна по нажатию клавиши Escape. В библиотеке BasicLightbox эта функциональность реализована встроенным механизмом обработки событий клавиш. Рассмотрим, как реализовать эту функцию и какие нюансы следует учитывать при её настройке.

Принцип работы

Когда окно модального окна открывается, оно становится активным и получает фокус. Важно, чтобы при нажатии клавиши Escape окно закрывалось автоматически, что улучшает пользовательский опыт и ускоряет взаимодействие с интерфейсом. В BasicLightbox эта возможность поддерживается по умолчанию, без необходимости в дополнительной настройке.

Автоматическое закрытие

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

import BasicLightbox from 'basiclightbox'

const instance = BasicLightbox.create(`
  <img src="path-to-image.jpg" width="800" height="600">
`)

instance.show()

В примере выше модальное окно с изображением откроется, и если пользователь нажмёт клавишу Escape, оно закроется автоматически. Это стандартное поведение, которое идеально подходит для большинства случаев.

Отключение закрытия по клавише Escape

В некоторых случаях может возникнуть необходимость отключить закрытие окна при нажатии клавиши Escape. Например, если внутри модального окна есть формы или элементы, которые должны оставаться открытыми при нажатии этой клавиши. Для этого в библиотеке предусмотрена настройка, позволяющая отключить обработчик события клавиши Escape.

Для того чтобы отключить эту функцию, необходимо использовать опцию closable при создании окна. В случае, если данная опция установлена в значение false, окно не будет закрываться по нажатию клавиши Escape.

const instance = BasicLightbox.create(`
  <div>
    <h1>Не закрывать по Escape</h1>
    <p>Для закрытия используйте только кнопку на экране.</p>
  </div>`, {
  closable: false
})

instance.show()

В данном примере окно будет закрываться только с помощью кнопки на экране, а не по клавише Escape.

Закрытие окна с помощью кастомных событий

В случае необходимости более гибкой настройки закрытия окна можно добавить собственный обработчик событий для клавиши Escape. BasicLightbox позволяет это сделать, используя стандартные методы управления модальным окном. Для этого можно привязать обработчик события клавиши Escape к документу или конкретному элементу.

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    instance.close()
  }
})

Этот код добавляет обработчик нажатия клавиши Escape для всей страницы. Когда клавиша будет нажата, окно закрывается. Такой подход может быть полезен, если требуется специфическая логика для различных модальных окон или более сложная обработка событий.

Важные замечания

  1. Управление фокусом. При открытии модального окна важно убедиться, что оно получает фокус, а остальные элементы страницы остаются недоступными. Библиотека BasicLightbox автоматически блокирует прокрутку и убирает фокус с фона, но в более сложных приложениях может потребоваться дополнительная настройка.

  2. Поддержка клавиатурных навигаций. Помимо клавиши Escape, часто требуется поддержка других клавиш для удобного навигации. BasicLightbox фокусируется на минимализме, не включая поддержку всех клавиш по умолчанию. Для более сложной реализации пользователь может добавить поддержку других клавиш, например, стрелок или пробела, чтобы переключать контент внутри модального окна.

  3. Кросс-браузерность. На различных устройствах и в разных браузерах обработка клавиш может отличаться. Важно протестировать закрытие окна по клавише Escape в самых популярных браузерах, чтобы убедиться в правильности работы функционала на всех платформах.

  4. Мобильные устройства. На мобильных устройствах клавиша Escape может не работать так, как ожидается. В большинстве случаев модальные окна должны иметь альтернативные способы закрытия, например, через кнопку “закрыть” или свайп. Однако при проектировании интерфейса стоит помнить об особенностях мобильных платформ.

Пример с дополнительными функциями

Если необходимо добавить поддержку как клавиши Escape, так и кастомного закрытия окна, это можно сделать следующим образом:

const instance = BasicLightbox.create(`
  <div>
    <h1>Окно с закрытием по клавише Escape и кнопке</h1>
    <button id="closeBtn">Закрыть</button>
  </div>`, {
  closable: false
})

instance.show()

document.getElementById('closeBtn').addEventListener('click', () => {
  instance.close()
})

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    instance.close()
  }
})

В этом примере окно будет закрываться как по клавише Escape, так и по нажатию на кнопку “Закрыть”. Это гибкий подход, который позволяет улучшить пользовательский интерфейс и сделать его удобным для всех типов устройств.

Заключение

Библиотека BasicLightbox предоставляет простой и эффективный механизм для работы с модальными окнами, включая функцию закрытия по клавише Escape. Эта опция встроена по умолчанию, что позволяет сосредоточиться на контенте и функциональности окна, минимизируя необходимое количество кода. Однако при необходимости можно настроить поведение закрытия окна, отключив обработку клавиши Escape или добавив собственные обработчики событий.

Оглавление