Dialog

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

На момент написания статьи выявлены следующие проблемы:

1. при использовании showModal() невозможно позиционировать относительно родителя (только относительно всего окна).

2. при использовании show() нет возможности растянуть тень (вместо :backdrop, так как это костыль для firefox) на весь экран.

Можно использовать для диалоговых окон, которые позиционируются относительно экрана (не родителя)

js

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

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

html

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

css

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