> For the complete documentation index, see [llms.txt](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bogdanov-inc.gitbook.io/ui-konstruktor-oktell/kontroly/modalnoe-okno.md).

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

![](https://899924798-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzcMn1glkgcrvuggFcDlD%2Fuploads%2FlUi5ozrTeVLH4mco5R6i%2Fimage.png?alt=media\&token=a7d0af95-57a8-42d2-8681-3814b41e464a)

Компонент для создания и управления модальными окнами

#### Свойства:

* *<mark style="color:purple;">opened</mark>* - открыть модальное окно в UI
* *<mark style="color:purple;">horizontalPosition</mark>* - позиционирование контента модального окна, может принимать значения:
  * **right** - правому краю
  * **left** - по левому краю
  * по умолчанию (без значения) - по центру
* *<mark style="color:purple;">childs</mark>* - список id дочерних контролов

#### События:

Поддерживаемые типы событий:

* *<mark style="background-color:purple;">onOpen</mark>* - срабатывает при открытии модального окна
* *<mark style="background-color:purple;">onClose</mark>* - срабатывает при закрытии модального окна

{% hint style="info" %}
Оптимально при работе с модальным окном добавить в него один компонент контейнера, который будет выступать основным родителем для всех дочерних элементов.

В таком случае, такому контейнеру можно будет указывать стили, подходящие для конкретного сценария использования, например свойство *<mark style="color:purple;">height</mark>*: **100vh,** при позиционировании модального окна по краю экрана.

При клике на затемнённый элемент подложки окна, оно будет автоматически закрыто. Также для дочерних элементов данного контрола можно задать **local\_event**, ответственный за установку параметра *<mark style="color:purple;">opened</mark>* модального окна в **false**, что также вызовет его закрытие. (Можно задать любому элементу, но, поскольку модальное окно перекрывает весь экран, они будут недоступны для действий пользователей)
{% endhint %}