1.0.1 • Published 2 years ago
pineglade-modal v1.0.1
pineglade-modal
Модальное окно с произвольной разметкой и стилизацией.
Возможности
- Несколько произвольно расположенных открывающих и закрывающих элементов для каждого модального окна.
- Блокирование основной прокрутки с сохранением позиции экрана.
- Собственная прокрутка по правой стороне окна при переполнении контентной части.
- Закрытие по
Esc
. - Запрет выхода фокуса за пределы содержимого модального окна.
Установка
npm i -DE pineglade-modal
Использование
Разметка
Элементы разметки помечаются дата-атрибутами с одинаковым значением:
data-modal
- на узел модального окна.data-modal-open
- на все узлы, открывающие это окно.data-modal-close
- на все узлы, закрывающие это окно.
Стили
Для выравнивания содержимого по вьюпорту рекомендуются следующие стили: modal.css.
Если используются postcss-import и БЭМ-блок modal
, можно импортировать часть переиспользуемых стилей модального окна:
@import url("../node_modules/pineglade-modal/modal.css");
Использование готового скрипта
<script>
window.MODAL_PREFIX = 'modal--'; // modal-- - значение по уполчанию
</script>
<script src="https://efiand.github.io/pineglade-modal/pineglade-modal.min.js"></script>
Кастомное подключение модуля в систему сборки
import Modal from 'pineglade-modal';
for (const modalElement of document.querySelectorAll('[data-modal]')) {
new Modal(modalElement, 'modal--'); // modal-- - значение по уполчанию
}
или:
import { initModals } from 'pineglade-modal';
initModals('modal--'); // modal-- - значение по уполчанию
Второй параметр конструктора - префикс имён классов-модификаторов:
*ready
- для стилизации модальных особенностей. Полезно для прогрессивного улучшения, когда до загрузки JS модальное окно в потоке.*opened
- для стилизации состояния открытого окна.