Атрибут data-popup является инициатором события вызова всплывающего блока. Данный атрибут может принимать в качестве значения селектор на объект всплывающего блока.
title & content
Вы так же можете обойтись без дополнительного блока и указать название и описание через атрибуты data-popup-title и data-popup-content, однако в таком случае HTML поддерживаться не будет, но и потребность в указании атрибута data-popup отпадёт.
<button type="button" class="btn" data-popup data-popup-content="Простейший всплывающий блок созданный через атрибуты" data-popup-title="Заголовок">Example #1</button>
Значения атрибутов data-popup-title и data-popup-content не являются обязательными, так же как и их аналог через отдельную HTML разметку .popup-title и .popup-content.
target
С помощью атрибута data-popup-target можно указать селектор элемента к которому будет привязан всплывающий блок.
<span id="target1">Target #1</span>
<button type="button" class="btn mt-100" data-popup data-popup-target="#target1" data-popup-content="Всплывающий блок с привязкой к другому объекту" data-popup-title="Заголовок">Example #4</button>
overlay
Атрибут data-popup-overlay="true" включает затемнение фона при появлении всплывающего блока. По умолчанию данная функция отключена.
<button type="button" class="btn" data-popup data-popup-overlay="true" data-popup-content="Всплывающий блок с затемнением" data-popup-title="Заголовок">Example #5</button>
autoclose
В качестве значение атрибута data-popup-autoclose принимается целое число - кол-во миллисекунд, по истечению которых всплывающий блок будет автоматически закрыт.
По умолчанию автозакрытие имеет значение 0, что будет означать отсутствие автоматического закрытия.
<button type="button" class="btn" data-popup data-popup-autoclose="3000" data-popup-content="Всплывающий блок с затемнением" data-popup-title="Заголовок">Example</button>
overclose
Атрибут data-popup-overclose включает или отключает закрытие всплывающего блока при нажатии на область, которая не является самим блоком.
По умолчанию данный атрибут имеет значение true.
<button type="button" class="btn" data-popup data-popup-overclose="true" data-popup-content="Всплывающий блок с закрытием" data-popup-title="Заголовок">[data-popup-overclose="true"]</button>
<button type="button" class="btn" data-popup data-popup-overclose="false" data-popup-content="Всплывающий блок без закрытия" data-popup-title="Заголовок">[data-popup-overclose="false"]</button>
direction
По умолчанию направление вывода всплывающего блока установлено как вверх (up) и меняется в зависимости от доступности области, однако вы можете поменять значение по умолчанию на своё с помощью атрибута data-popup-direction, однако блок по прежнему будет проверять доступность выбранного направления или искать другое.
На данный момент доступны следующие направления
up - вверх (по умолчанию)
down - вниз
left - влево
right - вправо
<button type="button" class="btn" data-popup data-popup-content="Блок будет выведен сверху" data-popup-title="Вверх">[data-popup-direction="up"]</button>
<button type="button" class="btn" data-popup data-popup-direction="down" data-popup-content="Блок будет выведен снизу" data-popup-title="Вверх">[data-popup-direction="down"]</button>
<button type="button" class="btn" data-popup data-popup-direction="left" data-popup-content="Блок будет выведен слева" data-popup-title="Вверх">[data-popup-direction="left"]</button>
<button type="button" class="btn" data-popup data-popup-direction="right" data-popup-content="Блок будет выведен справа" data-popup-title="Вверх">[data-popup-direction="right"]</button>
Javascript
Для работы с всплывающими блоками необходимо создать экземпляр класса PipUI.Popup.
По умолчанию инициализация происходит автоматически при клике на элемент
с атрибутом [data-popup].
Инициализация
Конструктор класса PipUI.Popup принимает 2 параметра: HTMLElement и Object
Первый параметр - селектор объекта самого блока всплывающего окна. Может быть пустым.
Второй параметр - объект опций
let popup = new PipUI.Popup('#popup-box');
Опции
// Выводить в консоль отладку
debug: false
// Селектор или HTMLElement к которому будет привязан всплывающий блок
target: undefined
// Список триггеров, при нажатии на которые будет появляться/исчезать блок
triggers: []
// Название, выводимое в всплывающем блоке. Если не указано, то появится без названия.
title: ''
// Содержимое, выводимое в всплывающем блоке. Если не указано, то появится без содержимого.
content: ''
// Направление вывода. Поддерживаются: up, down, left, right
direction: 'up'
// Выводить ли оверлей
overlay: false
// Кол-во миллисекунд, через которое блок автоматически закроется
autoclose: 0
// Закрывать всплывающий блок при клике на область вне самого блока
overclose: true
// Класс присваиваемый всплывающему блоку при открытии
openedClass: 'popup-active'
// Класс присваиваемый оверлею при открытии
openedOverlayClass: 'overlay-active'
// Класс присваиваемый триггеру при открытии
openedTriggerClass: 'active'
// Класс элемента к которому привязан всплывающий блок
targetClass: 'popup-target'
// Класс, присваиваемый элементу к которому привязан всплывающий блок, при открытии
targetActiveClass: 'popup-target-active'
// Функция обратного вызова срабатываемая при появлении всплывающего блока
openCallback: undefined
// Функция обратного вызова срабатываемая при исчезании всплывающего блока
closeCallback: undefined
// Функция обратного вызова срабатываемая при обновлении всплывающего блока
updateCallback: undefined
// Функция обратного вызова срабатываемая при изменении позиции всплывающего блока
repositionCallback: undefined
// Шаблоны
templates: {
// Разметка основного блока всплывающего окна
box: '...'
// Разметка блока оверлея
overlay: '...'
}
Методы
let popup = new PipUI.Navbar('#popup');
popup.getID() // Вернет уникальный идентификатор всплывающего блока
popup.setOptions(object) // Изменить опции блока
popup.getOptions() // Получить опции блока
popup.getPosition(name) // Получить актуальную позицию блока(служит для обновления)
// Параметр name является направлением позиции
popup.updatePosition() // Обновить позицию всплывающего блока
popup.update() // Обновить всплывающее окно
popup.hide(callback) // Скрыть панель
// Параметр callback является приоритетной функцией обратного
// вызова при завершении скрытия, если она задана и через опции
popup.show(callback) // Показать блок
// Параметр callback является приоритетной функцией обратного
// вызова при завершении отображения, если она задана и через опции
popup.isOpen() // Текущее состояние блока (открыт или закрыт)
popup.open(callback) // Отобразить блок
// Параметр callback является приоритетной функцией обратного
// вызова при завершении отображения, если она задана и через опции
popup.close(callback) // Скрыть блок
// Параметр callback является приоритетной функцией обратного
// вызова при завершении скрытия, если она задана и через опции
События
Триггер
Описание
Инициатор
open-popup-pipui
Срабатывает при открытии всплывающего блока
.popup
close-popup-pipui
Срабатывает при закрытии всплывающего блока
.popup
update-popup-pipui
Срабатывает при обновлении содержимого всплывающего блока
.popup
update-position-popup-pipup
Срабатывает при обновлении позиции всплывающего блока
