Тег <dialog>

Синтаксис

<dialog>...</dialog>

Описание

Тег <dialog> (от англ. dialog — диалог) создаёт диалоговое окно, в котором можно выводить сообщение или форму.

Внимание!

Для того, чтобы показать/скрыть содержимое необходим Javascript.

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

Атрибуты, которые можно использовать в теге <dialog>, указаны ниже. Также тег поддерживает глобальные атрибуты и атрибуты события.

Атрибуты

Атрибут Значение Описание
open open

Указывает, что диалоговое окно активно, и пользователь может с ним взаимодействовать

Пример

HTML-код:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Тег dialog</title>
</head>
<body>
    <dialog open>
        <p>CSS по умолчанию для тега dialog с атрибутом open:
            position: absolute;<br>
            left: 0;<br>
            right: 0;<br>
            margin: auto;<br>
            border: solid;<br>
            padding: 1em;<br>
            background: white;<br>
            color: black;
        </p>
    </dialog>
</body>
</html>

Отображение в браузере:

CSS по умолчанию для тега dialog с атрибутом open:
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    border: solid;
    padding: 1em;
    background: white;
    color: black;

Параметры CSS по умолчанию

dialog {
    display: none
}

Поддержка браузера

Элемент

Chrome

Chrome

Opera

Opera

Firefox

Firefox

Safari

Safari

Microsoft Edge

Microsoft Edge
<dialog> Да Да Да Да Да