gm

graph-modal

npm i graph-modal

Readme

Graph-modal

Простая и легкая JavaScript-библиотека для модальных окон

Особенности

  • Никаких зависимостей. Библиотека написана на чистом JavaScript, для работы не требуются иные библиотеки.
  • Простота и функциональность. Вы можете легко и быстро подключить и использовать библиотеку, которая реализует важный функционал для модальных окон: отключение скролла, разные способы закрытия окна, центрирование окна и т.д.
  • Фокусируемость. При открытии окна фокус фиксируется внутри него.
  • Настройка с помощью CSS. Вы можете легко менять внешний вид, расположение и даже анимацию появления с помощью CSS.
  • Окно из окна. Библиотека позволяет открыть новое окно из другого окна (при этом предыдущее закроется).

Как работать с библиотекой

  1. Скачайте последнюю версию библиотеки
  2. Подключите graph-modal.min.css и graph-modal.min.js из папки dist к странице
  3. Поместите в ваш html-документ следующую разметку:
<div class="graph-modal">
    <div class="graph-modal__container" role="dialog" aria-modal="true" data-graph-target="first">
        <button class="btn-reset graph-modal__close js-modal-close" aria-label="Закрыть модальное окно"></button>
        <div class="graph-modal__content">
            <!-- контент модального окна -->
        </div>
    </div>
</div>

Важные нюансы селекторов

.graph-modal - Элемент окна-родителя для других модальных окон, то есть в него вкладываются все модальные окна на сайте, которые вам нужны. Также является "затемнением" сайта при открытии окна.

.graph-modal__container - Элемент самого модального окна. Имеет атрибут [data-graph-target], предназначенный для связи с открывающей кнопкой.

.js-modal-close - Элемент, закрывающий текущее модальное окно.

  1. Разместите следующий JS-код для подключения модального окна:
const modal = new GraphModal();
  1. Создайте в разметке кнопку, которая будет открывать модальное окно. Задайте ей атрибут [data-graph-path] со значением, равным значению [data-graph-target] у модального окна.

Открытие конкретного окна по событию

Вы можете сразу открыть окно, если создадите экземпляр класса и сразу вызовите у него метод open() с передачей значения атрибута [data-graph-target]. Пример:

document.querySelector('.btn').addEventListener('click', () => {
    new GraphModal().open('second');
});

Настройки

Настраивать модальное окно можно исключительно через html-разметку:

  1. Для определения анимации модального окна добавьте элементу, открывающему модальное окно, атрибут [data-graph-animation=""] с нужным вам значением (по умолчанию fade). По умолчанию доступны два варианта анимации - fade и fadeInUp, однако вы можете написать любое значение атрибута, а затем определить его в css-стилях. Пример:
<button class="btn-reset modal-btn" data-graph-animation="custom" data-graph-path="second">Открыть окно</button>
.custom.animate-open {
    opacity: 1;
    transform: rotate(180deg);
    transition: transform var(--transition-time), opacity var(--transition-time);
}

Таким образом вы осуществляете привязку атрибута custom и класса .custom

  1. Для определения времени анимации появления окна добавьте элементу, открывающему модальное окно, атрибут [data-graph-speed=""] с нужным вам значением (по умолчанию 300мс). Поскольку плагин использует Css Custom Properties (css-переменные), таким образом вы сможете переназначить переменную --transition-time в нужном месте. Пример:
<button class="btn-reset modal-btn" data-graph-animation="custom" data-graph-path="second" data-graph-speed="500">Открыть окно</button>

События

Библиотека поддерживает два события:

  1. Событие isOpen - срабатывает в момент открытия модального окна. Может принимать входной параметр - объект открытого окна, например, для помещения в модальное окно чего-либо через js. Пример:
const modal = new GraphModal({
    isOpen: (modal) => {
        console.log(modal);
        console.log('opened');
    },
});
  1. Событие isClose - срабатывает в момент закрытия модального окна. Пример:
const modal = new GraphModal({
    isOpen: (modal) => {
        console.log(modal);
        console.log('opened');
    },
    isClose: () => {
        console.log('closed');
    }
});

Пример работы библиотеки вы можете увидеть, открыв файл index.html в браузере.

Приятного пользования!

Jump To