Вступление #

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

Установка #

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

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

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

    BasicPopup.init({
        'trigger': '.class-trigger',
        'popup': '#id-popup'
    });

    // или

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

Параметры:

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

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

data-popup-id #

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

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

Методы #

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>' // новый контент
    });

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

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

popup visibility #

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

Параметры:

    document.getElementById('my-popup-id').addEventListener('popup visibility', function(event) {

        console.log(event.detail); // параметры

    }, false)