" %}
Пример работы кода выше
{% endembed %}
## Javascript
Для работы с всплывающими блоками необходимо создать экземпляр класса PipUI.Popup.\
По умолчанию инициализация происходит автоматически при клике на элемент\
с атрибутом \[data-popup].
### Инициализация
Конструктор класса PipUI.Popup принимает 2 параметра: HTMLElement и Object
Первый параметр - селектор объекта самого блока всплывающего окна. Может быть пустым.
Второй параметр - объект опций
```javascript
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: '...'
}
### Методы
```javascript
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 |
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://v2-0-0.pipui.ru/components/popup.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.