Вступление #

Для работы поп-ап можно использовать класс по умолчанию .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);