maxdenaro / graph-modal

Simple Javascript library for modal windows

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 - Элемент, закрывающий текущее модальное окно.

4. Разместите следующий JS-код для подключения модального окна:

const modal = new GraphModal();

5. Создайте в разметке кнопку, которая будет открывать модальное окно. Задайте ей атрибут [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

2. Для определения времени анимации появления окна добавьте элементу, открывающему модальное окно, атрибут [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');
	},
});

2. Событие isClose - срабатывает в момент закрытия модального окна. Пример:

const modal = new GraphModal({
	isOpen: (modal) => {
		console.log(modal);
		console.log('opened');
	},
	isClose: () => {
		console.log('closed');
	}
});

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

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

graph-modal's Issues

Sofort

25000

Создание модального окна из JS и открытие его методом .open("modal")

Добрый день, Максим.
Когда открываю модальные окна традиционным способом (то есть окно сверстано заранее, по клику на кнопку с data-graph-path), то модальное окно центрируется по высотке на середине экрана. Все здорово!

В случае, когда формирую разметку окна из JS, и открываю через метод new GraphModal({ isOpen: () => { my code here } }).open("modal"), то на мобильных устройствах окно открывается сильно ниже, за пределами видимости.

Код приложил ниже. Скриншоты открытых окон также. События отрабатывают корректно. Подозреваю, что где-то что-то прошляпил.

Версия graph-modal 1.0.6.

const newModal = new GraphModal({
        isOpen: (modal) => {
          cardSwiper = new Swiper(image, {
            allowTouchMove: false,
            slidesPerView: 1,
            spaceBetween: 20,
            loop: false,
            speed: 500,
            mousewheel: true,
            navigation: {
              nextEl: '.card__swiper-next',
              prevEl: '.card__swiper-prev',
            },
            pagination: {
              el: '.card__swiper-pagination',
              type: 'bullets',
              clickable: true,
              dynamicBullets: true,
              dynamicMainBullets: 2,
            },
          });
          cardSwiper.slideTo(clickedIndex, 0, false);
          const videos = image.querySelectorAll('.card__video--yt');
          videos ? prepareVideoYT(cardSwiper, videos, youtubePlayersSet) : false;
          console.log('modal opened');
        },
        isClose: (modal) => {
          cardSwiper.destroy();
          modal.modal.querySelector('[data-graph-target="image-zoom"]')?.remove();
          swiper.swiper.updateSlidesClasses();
          console.log('modal closed');
        }
      }).open('image-zoom');

Открытие модального окна при валидации формы

Подскажите, есть ли какая то возможность чтобы окно открывалось в зависимости от валидности формы, а не только по нажатию на кнопку?

Открытие окна при загрузке страницы.

Добрый день. Как я могу вызвать окно при загрузке страницы по определенному .hash:

window.addEventListener('load', function () {
  const hash = window.location.hash;
  
  if(hash == '#serv-order'){
// Что необходимо вставить если data-graph-target="serv-order" ?
  }
})

Спасибо