<dialog>

Элемент <dialog> (от англ. dialog — диалог) создаёт диалоговое окно, в котором можно выводить сообщение или форму, например, для входа на сайт. Изначально такое окно не отображается, чтобы его показать применяется атрибут open или JavaScript.

Диалоговое окно отображается со следующим предустановленным стилем.

display: none;
position: absolute;
left: 0;
right: 0;
margin: auto;
border: solid;
padding: 1em;
background: white;
color: black;

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

Для отображения и сокрытия диалогового окна применяются, соответственно, методы show() и close(), как показано в примере ниже. Кроме того, диалог можно превратить в модальное окно, используя вместо show() метод showModal(). В этом случае остальные элементы на странице блокируются — текст нельзя выделить, а кнопки нажать до тех пор, пока диалоговое окно не будет закрыто. Также модальное окно можно закрыть клавишей Esc.

Синтаксис

<dialog>
…
</dialog>

Атрибуты

open
Отображает диалоговое окно. Без этого атрибута в стилях к нему добавляется display:none и окно не выводится в браузере.

Для этого элемента также доступны универсальные атрибуты и события.

Пример

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>dialog</title> <style> body { background: url(/example/image/shark.jpg) no-repeat fixed; /* Параметры фона */ background-size: cover; /* Размер фона */ } dialog { background: rgba(255, 255, 255, 0.7); /* Полупрозрачный фон */ width: 300px; /* Ширина окна */ box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Параметры тени */ border-radius: 5px; /* Скруглённые уголки */ } </style> </head> <body> <button id="openDialog">Открыть окно</button> <dialog> <p>Полинезийцы называют Млечный путь Манго-Роа-И-Ата, что в переводе с маори означает «Длинная акула на рассвете».</p> <p><button id="closeDialog">Закрыть окно</button></p> </dialog> <script> var dialog = document.querySelector('dialog'); document.querySelector('#openDialog').onclick = function() { dialog.show(); // Показываем диалоговое окно } document.querySelector('#closeDialog').onclick = function() { dialog.close(); // Прячем диалоговое окно } </script> </body> </html>

Результат данного примера показан на рис. 1. При нажатии на кнопку «Открыть окно» отображается содержимое элемента <dialog>, до этого невидимое. При нажатии на кнопку «Закрыть окно» диалоговое окно скрывается.

Вид диалогового окна

Рис. 1. Вид диалогового окна

Спецификация

Браузеры

79 37 24 15.4 98
37 98 24 15.4

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.
Документ

Самостоятельная