Вступление #

Для работы поп-ап можно использовать класс по умолчанию .js-trigger-popup и атрибут data-popup-id с указанием id поп-апа.

Установка #

Пример разметки и инициализации поп-апа.

<button class="js-trigger-popup" type="button" data-popup-id="demo-popup-a">Открыть поп-ап</button>

<div class="popup" id="demo-popup-a">
	<h1>Basic popup.</h1>
	<p>Вызывается при помощи триггера <code>.js-trigger-popup</code>.</p>
</div>

BasicPopup.init({
	trigger: '.my-trigger',
	popup: '#my-popup',
})

// или

BasicPopup.init() // по умолчанию инициaлизирует элементы с классом .js-trigger-popup и с дата-атрибутом data-popup-id.

Параметры:

Также можно инициализировать только один поп-ап без триггера. Для этого в параметрах необходимо указать только сам элемент поп-апа:

<div class="popup" id="demo-popup-b">
	<h1>Basic popup.</h1>
	<p>Поп-ап без триггера</p>
</div>

BasicPopup.init('#demo-popup-b') // принимает значение типа Object или String

Конфигурация #

Настройки, заданные с использованием data-атрибутов.

data-popup-id #

В значениях указывается id поп-апа. Привязывает триггер к указанному поп-апу.

<button class="js-trigger-popup" type="button" data-popup-id="demo-popup-a">Открыть поп-ап</button>

<div class="popup" id="demo-popup-a">
	<h1>Basic popup.</h1>
</div>

data-popup-close #

Если нужно добавить в поп-ап новый элемент, который будет отвечать за его закрытие, то это можно сделать, просто добавив дата-атрибут data-popup-close.

Методы #

show() #

Показывает поп-ап.

// принимает значение типа Object или String
BasicPopup.show('#my-popup')

hide() #

Скрывает поп-ап.

// принимает значение типа Object или String
BasicPopup.hide('#my-popup')

html() #

Добавляет динамический контент и показывает поп-ап.

BasicPopup.html({
	popup: '#my-popup', // поп-ап(принимает значение типа Object или String)
	content: '<p>Новый контент поп-апа.</p>', // новый контент
})

Экземпляр #

У каждого инициализированного поп-ап элемента есть свой экземпляр.

const myPopup = document.querySelector('#my-popup')

console.log(myPopup.BasicPopup) // пример экземпляра

Прослушивание событий #

Можно прослушать события элемента и получить нужные параметры.

popup:change #

Срабатывает при переключении видимости поп-апа.

Параметры:

const myPopup = document.getElementById('my-popup')

myPopup.addEventListener(
	'popup:change',
	function (event) {
		console.log(event.detail) // параметры
	},
	false,
)