Npm-пакет: hq-modal

Hq-Modal — это исключительно простой утилитарный инструмент для управления и настройки модальных окон на веб-странице. Он помогает быстро настроить и вызвать модальные окна.

Библиотека позволяет:

• Задать ширину модального окна
• Контролировать его позицию на странице
• Настроить цвет оверлея
• Показать или скрыть кнопку закрытия
• Исправить сдвиг контента при открытии модального окна
• Закрывать модальные окна по нажатию клавиши Escape или клику вне окна
• Блокировать прокрутку и взаимодействие с фоном
• Адаптивность: отлично работает на мобильных устройствах без блокировки контента
• Легковесность (~2KB в минифицированном виде), без зависимостей

Установка

Несколько вариантов использования и установки:

Вариант 1 – NPM

Установка через npm:

npm install hq-modal --save-dev

Вариант 2 – Использование через CDN

<script src="https://unpkg.com/hq-modal@latest/dist/hq-modal.umd.js"></script>

Настройка

1 – Определите модальное окно

В HTML определите блок модального окна, используя атрибут data-hq-modal-block="test-name" и атрибут hidden.

Замените "test-name" на любое имя по вашему выбору.

Пример:

<div data-hq-modal-block="test-name" hidden>
  <!-- содержимое модального окна -->
</div>

2 – Добавьте элементы для вызова модального окна

Для вызова модального окна присвойте атрибут data-hq-modal-button="test-name" любому элементу.

"test-name" должно совпадать с именем, использованным на предыдущем шаге.

Пример:

<button data-hq-modal-button="test-name">Открыть модальное окно</button>

Необязательные кнопки закрытия внутри модального окна

Если вы хотите добавить дополнительные кнопки закрытия внутри модального окна, присвойте им атрибут data-hq-modal-close.

Внимание: это для внутренних кнопок. Встроенная кнопка закрытия контролируется опцией showButtonClose при инициализации.

Пример:

<button data-hq-modal-close>Закрыть</button>

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

Инициализация и базовая настройка:

Если используете NPM, импортируйте модуль:

import HqModal from 'hq-modal';

Если используете CDN, просто инициализируйте:

Инициализация

const testName = new HqModal('test-name');

С параметрами конфигурации

Также можно передать параметры конфигурации:

const testName = new HqModal('test-name', {
  maxWidth: '400px',
  background: 'rgba(0, 0, 0, 0.5)',
  top: '10px',
  left: '100px',
  showButtonClose: true,
});

Справочник опций

⚠️ Важно: top и bottom не должны использоваться одновременно — выберите один. То же касается left и right.

Требования и совместимость

• Может использоваться как ES-модуль
• Может также использоваться как UMD-бандл (hq-modal.umd.js включён или доступен через CDN)
• Работает во всех современных браузерах

Лицензия

Этот проект лицензирован под MIT License.