Всплывающие блоки

Общая информация

Если есть необходимость использовать HTML во всплывающих подсказках(tooltip), то вам могут помочь всплывающие блоки.

Разметка

<div id="popup" class="popup">
    <div class="popup-title">Header</div>
    <div class="popup-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, sit?</div>
</div>
<button type="button" class="btn" data-popup="#popup">Example</button>

Пример работы кода выше

Поддерживаемые атрибуты

Атрибут 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	Срабатывает при обновлении позиции всплывающего блока	.popup