unimodal

Модальное окно с произвольной разметкой и стилизацией.

Возможности

• Несколько произвольно расположенных открывающих и закрывающих элементов для каждого модального окна.
• Блокирование основной прокрутки с сохранением позиции экрана.
• Собственная прокрутка по правой стороне окна при переполнении контентной части.
• Закрытие по Esc.
• Запрет выхода фокуса за пределы содержимого модального окна.

Установка

npm i -DE unimodal

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

Разметка

Элементы разметки помечаются дата-атрибутами с одинаковым значением:

• data-modal - на узел модального окна.
• data-modal-open - на все узлы, открывающие это окно.
• data-modal-close - на все узлы, закрывающие это окно.

Стили

Для выравнивания содержимого по вьюпорту рекомендуются следующие стили: modal.css.

Если используются postcss-import и БЭМ-блок modal, можно импортировать часть переиспользуемых стилей модального окна:

@import url("../node_modules/unimodal/modal.css");

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

<script>
  window.MODAL_PREFIX = 'modal--'; // modal-- - значение по уполчанию
</script>
<script src="https://efiand.github.io/unimodal/modal.min.js"></script>

Кастомное подключение модуля в систему сборки

import Modal from 'unimodal';

for (const modalElement of document.querySelectorAll('[data-modal]')) {
  new Modal(modalElement, 'modal--'); // modal-- - значение по уполчанию
}

или:

import { initModals } from 'unimodal';

initModals('modal--'); // modal-- - значение по уполчанию

Второй параметр конструктора - префикс имён классов-модификаторов:

• *ready - для стилизации модальных особенностей. Полезно для прогрессивного улучшения, когда до загрузки JS модальное окно в потоке.
• *opened - для стилизации состояния открытого окна.