# Модальные окна

## Общая информация <a href="#general-information" id="general-information"></a>

Когда необходимо вывести дополнительный контент, а создавать для этого отдельную страницу нет необходимости, то на помощь нам придут модальные окна.

```html
<button type="button" class="btn" id="modal-trigger1" data-modal="#modal1">Modal</button>

<div class="modal" id="modal1">
    <div class="modal-wrapper">
        <div class="modal-content">
            <div class="modal-header">Название окна</div>

            <div class="modal-body">
                Содержимое модального окна
            </div>

            <div class="modal-footer">
                <button class="btn btn-transparent" data-modal-close>Закрыть</button>
            </div>
        </div>
    </div>
</div>
```

{% embed url="<https://codepen.io/pipui/pen/xxJBGbp>" %}
Пример работы кода выше
{% endembed %}

Модальные окна работают через Javascript и объект PipUI.Modal

При использовании открытия модального окна через атрибуты, экземпляр класса PipUI.Modal создается автоматически, как показано в примере выше и хранится в PipUI.Storage

## Javascript

Инициализация и управление может быть произведено напрямую через Javascript. Для того, чтобы инициализировать модальное окно, требуется создать экземпляр класс PipUI.Modal и передать в него необходимые параметры.

Класс PipUI.Modal принимает 3 параметра

1. HTMLElement или строковая ссылка на элемент
2. Объект опций
3. Стратегия создания (true/false)

```html
<div id="mymodal"></div>

<script>
let modal = new PipUI.Modal('#mymodal', {
    header: 'My modal',
    body: 'Lorem ipsum'
}, true)
</script>
```

Если вы сформирует HTML код модального окна самостоятельно и зададите только первый параметр, то все параметры будут извлечены из HTML кода автоматически.

### Опции <a href="#options" id="options"></a>

```
// Выводить в консоль отладку
debug: false

// Заголовок модального окна. Можно использовать HTML
header: ''

// Тело модального окна. Можно использовать HTML
body: ''

// Нижняя часть модального окна. Можно использовать HTML
footer: ''

// Функция обратного вызова, срабатываемая при открытии модального окна
showCallback: undefined

// Функция обратного вызова, срабатываемая при закрытии модального окна
hideCallback: undefined

// Функция обратного вызова, срабатываемая при завершении открытия модального окна
showedCallback: undefined

// Функция обратного вызова, срабатываемая при завершении закрытия модального окна
hidedCallback: undefined

// Функция обратного вызова, срабатываемая при стратегии обновления
updateCallback: undefined

// Функция обратного вызова, срабатываемая при стратегии инициализации
initCallback: undefined

// Класс открытого модального окна
targetActiveClass: 'modal-active'

// Настройка шаблона модального окна при инициализации по стратегии создания
templates: {
        // Основной код модального окна
	modal: '<div class="modal"><div class="modal-wrapper"><div class="modal-content"></div></div></div>'
	
	// Код заголовка модального окна
	header: '<div class="modal-header"></div>'
	
	// Тело модального окна
	body: '<div class="modal-body"></div>'
	
	// Нижняя часть модального окна
	footer: '<div class="modal-footer"></div>'
	
	// Код кнопки закрытия модального окна
	close: '<a href="#" rel="nofollow" data-modal-close class="modal-close"></a>'
}
```

### Методы <a href="#methods" id="methods"></a>

```javascript
let modal = new PipUI.Modal('#mymodal');

modal.getID() // Вернет уникальный идентификатор модального окна.
// Он так же хранится в блоке .modal

modal.setOptions(object) // Изменить опции модального окна. DOM не будет изменен
// до вызова метода modal.update()

modal.getOptions() // Получить опции модального окна

modal.update() // Отрендерит модальное окно заново из текущих опций

modal.isOpen() // Открыто ли модальное окно

modal.hide(callback) // Скрыть модальное окно
// Параметр callback является приоритетной функцией обратного
// вызова при начале скрытия, если она задана и через опции

modal.show(callback) // Отобразить модальное окно
// Параметр callback является приоритетной функцией обратного
// вызова при начале отображения, если она задана и через опции
```

### События

| Триггер            | Описание                                           | Инициатор |
| ------------------ | -------------------------------------------------- | --------- |
| update-modal-pipui | Срабатывает при стратегии обновления               | .modal    |
| init-modal-pipui   | Срабатывает при стратегии инициализации            | .modal    |
| show-modal-pipui   | Срабатывает при начале открытия модального окна    | .modal    |
| hide-modal-pipui   | Срабатывает при начале закрытия модального окна    | .modal    |
| showed-modal-pipui | Срабатывает при окончании открытия модального окна | .modal    |
| hided-modal-pipui  | Срабатывает при окончании закрытия модального окна | .modal    |


---

# 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/modal.md?ask=<question>
```

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.