Micromodal.js — легкая, конфигурируемая, доступная

Библиотека — https://micromodal.now.sh/

Авторы — Kalpesh Singh и Indrashish Ghosh


Демо

Введение

Micromodal.js — это легковесная, конфигурируемая и содержащая a11y библиотека модального окна, написанная на чистом JavaScript.

Библиотека позволяет создавать на основе WAI-ARIA стандартов (Web Accessibility Initiative — Accessible Rich Internet Applications ) модальные окна с надёжными и минимальными конфигурациями. В минифицированном (c gzip’овском сжатием) состоянии  размер библиотеки  равен 1,9 кбайта —  крошечная библиотека для больших дел.

Ниже приведен основные плюшки функционала библиотеки:

  • закрытие модального окна при нажатии на область оверлея;
  • закрытие модального окна нажатием на ESC;
  • переключение aria-hidden атрибута;
  • в модальном окне tab’ы готовы к взаимодействию ;
  • после закрытия модального окна ваш фокус будет на последнем сфокусированном элементе;
  • при открытии модального окна фокус находится на первом доступным для фокуса элементе.

Установка

Микромодал доступен в npm и может быть установлен из командной строки через npm или yarn:

Вы также можете загрузить или сослаться на последнюю версию с помощью CDN:

Использование

Разработанный, чтобы быть простым в использовании, он выполняют большую работу за кулисами и предоставляет простой API для взаимодействия с DOM.

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

1. Добавление разметки модального окна

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

  1. Это самый внешний контейнер модального окна. Работа заключается в переключении модальности. Важно, чтобы каждый модал был с уникальным id. По умолчанию aria-hidden будет true. Micromodal позаботится о том, чтобы происходило переключение атрибута, когда это необходимо.
  2. Этот  div является оверлеем модального окна. На нём висит атрибут data-micromodal-close. Это специальный атрибут, который указывает, что при нажатии на элемент должно запускаться закрытие модального окна. Если мы удалим этот атрибут, то, при нажатии на оверлей, модальное окно не закроется.
  3. Атрибут role="dialog" используется для информирования внутренних технологий библиотеки, что содержание блока отделено от остальной части страницы. Кроме того, атрибут aria-labelledby="modal-1-title" указывает на id модального окна. Аналогичный смысл у aria-describedby, который по id определяет точку входа для отображения контента модального окна.
  4. Обертка с role="document является необязательной, но её наличие рекомендуется. Это помогает информировать читателей экрана и другие вспомогательные устройства о существовании отдельного контекста в документе, а именного модального окна.
  5. Убедитесь, что все кнопки имеют атрибут aria-label, который определяет действие кнопки. Обратите внимание, что атрибут  data-micromodal-close используется на кнопке закрытия, так как мы хотим закрыть модальное окна при нажатии.

2.  Подключите micromodal.js

Если вы включили скомпилированный файл из CDN в свой проект, у вас будет доступ к глобальной переменной MicroModal, которую вы можете использовать для создания экземпляра модуля.

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

3. Использование триггер-кнопки

Установите data-micromodal-trigger="modal-1" на элемент, например кнопку или ссылку, при клике по которому вы хотите показать модальное окноа. Значение атрибута в этом случае modal-1 должно соответствовать id модального окна.

Затем создайте экземпляр MicroModal, чтобы он инициализировал привязку.

Метод init также принимает и дополнительные параметры. Это можно использовать для создания хуков, выполняемых в модальных окнах при открытых и закрытии. Пример:

  • onShow {Function} срабатывает, когда модальное окно открывается. Функция принимает модальный объект в качестве первого параметра.
  • onClose {Function} срабатывает, когда модальное окно закрывается. Функция принимает модальный объект в качестве первого параметра.

4. Запуск модального окна из скрипта

Вы также можете запускать модальные окна с помощью метода show объекта MicroModal. Пример:

  1. Строка, переданная show методу, должна соответствовать id модальной функции, которая должна быть переключена.

5. Стилизация

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

В любом случае, мы рекомендуем следующий css для переключения модальности.

Если вы хотите, чтобы некоторые стили работали по умолчанию, вы можете сослаться на стили и соответствующую разметку демо-кода.