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

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

```html
<button class="btn" data-modal="example-modal-1">Показать модальное окно</button>
<div class="modal" data-id="example-modal-1">
    <div class="wrapper">
        <div class="modal-content">
            <div class="modal-header">Название</div>

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

                <div class="pt-20">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, at, aut blanditiis distinctio esse ipsam nisi odio odit pariatur quasi qui tempora, totam. Modi odio recusandae velit voluptate. Odit, quibusdam!</div>
            </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/LYBxWjW>" %}
Пример работы модального окна
{% endembed %}

Вы можете регулировать размер модального окна, добавляя к блоку <mark style="color:orange;">`.modal > .wrapper`</mark> классы размеров <mark style="color:orange;">`.w-{NUM}-i`</mark>

Управлять появлением и исчезанием модальных окон можно с помощью JS

```javascript
pipui.modal.open('modal-id');
pipui.modal.close('modal-id');
pipui.modal.toggle('modal-id');
```


---

# 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://v1-6-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.