HTML тег <dialog>

Элемент <dialog> (от англ. "dialog" ‒ «диалог») создаёт диалоговое окно, с которым непосредственно работает пользователь для выполнения определенных действий. Атрибут open активирует диалоговое окно, созданное с помощью этого тега.

Благодаря тегу <dialog> можно легко создавать всплывающие и модальные диалоговые окна.

Синтаксис

<dialog open>...</dialog>

Закрывающий тег

Обязателен.

Атрибуты

open

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

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

Стилизация по умолчанию

Большинство браузеров отобразит элемент <dialog> со следующими значениями CSS по умолчанию:

dialog {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    border: solid;
    padding: 1em;
    background: white;
    color: black;
}

Различия между HTML 4.01 и HTML5

Тег <dialog> был добавлен в HTML5.

Пример использования:

Элемент <dialog>

<table>
<tr>
  <th>Январь <dialog open>Это открытое диалоговое окно</dialog></th>
  <th>Февраль</th>
  <th>Март</th>
</tr>
<tr>
  <td>31</td>
  <td>28</td>
  <td>31</td>
</tr>
</table>

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

<dialog id="myFirstDialog" style="width:50%;background-color:#F4FFEF;border:1px dotted black;">
<p><q>Мир полон волшебных вещей, терпеливо ожидающих, что наш ум станет острее.</q> ‒ <cite>Бертран Рассел</cite></p>
<button id="hide">Закрыть</button>
</dialog>
<button id="show">Показать</button>

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