---
description: Вызов диалогового окна через тэг <dialog>
---

# Dialog

{% hint style="warning" %}
На момент написания статьи выявлены следующие проблемы:

1. при использовании showModal() невозможно позиционировать относительно родителя (только относительно всего окна).
2. при использовании show() нет возможности растянуть тень (вместо :backdrop, так как это костыль для firefox) на весь экран.
{% endhint %}

{% hint style="info" %}
Можно использовать для диалоговых окон, которые позиционируются относительно экрана (не родителя)
{% endhint %}

## js

Метод .show - вызывает диалоговое окно непосредственно там, где оно находится в DOM дереве.

Метод .showModal - вызывает диалоговое окно по центру экрана с оверлэем (backdrop).

## html

Если в диалоговом окне есть форма и необходимо закрывать окно после submit, то необходимо указывать - `<form method="dialog">.`

## css

Для создания анимации появления (скрытия) диалогового окна необходимо применять анимацию `@keyframes`
