HTML5 <dialog>

Тег dialog представляет собой диалоговое окно на веб-странице. Элемент dialog может оформляться свойствами CSS.

Элемент dialog

<dialog>Окно диалога</dialog>

Сам по себе элемент dialog визуально ни чего ни покажет, нужно добавить JavaScript API, чтобы открыть и закрыть диалоговое окно.

к меню ↑

Открыть и закрыть диалог

Функции .show() и .close() откроют и закроют диалоговое окно.
<dialog>
  <p>Окно диалога</p>
  <button id="close">Закрыть</button>
</dialog>
<button id="show">Открыть диалог</button>

<script>
var dialog = document.querySelector('dialog');
document.querySelector('#show').onclick = function() {
  dialog.show(); // открыть диалоговое окно
};

document.querySelector('#close').onclick = function() {
  dialog.close(); // закрыть диалоговое окно
};</script>
к меню ↑

Стиль для диалогового окна

Добавить правила стиля для элемента dialog, можно так же, как и к другим любым элементам: nav, div, footer и т.д.

dialog {
   border: 1px solid rgba(0, 0, 0, 0.3);
   border-radius: 6px;
   box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}

Правила стиля для элемента dialog

к меню ↑

Модальное диалоговое окно

Диалоговое окно можно сделать модальным, для этого нужно вместо .show() вызвать функцию .showModal().

document.querySelector('#show').onclick = function() {
  dialog.showModal(); // открыть модальное диалоговое окно
};

Диалоговое окно будет всегда поверх других элементов, независимо от значений z-index, в том числе ранее открытых модальных диалоговых окон.

При необходимости можно закрыть модальное диалоговое окно с помощью кнопки Esc

к меню ↑

Фон для диалогового окна

Псевдоэлемент ::backdrop добавит фон диалоговому окну.

dialog::backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
}

Фон выделяет диалоговое окно скрывая остальное.

к меню ↑

Вод значений в диалоговом окне

Диалоговое окно отправит на обработку значение свойства .returnValue.

<dialog>
  <input type="text" id="return_value" value="" placeholder="Введите значение">
  <button id="close">Отправить</button>
</dialog>
<button id="show">Открыть диалог</button>

document.querySelector('#close').onclick = function() {
  var value = document.querySelector('#return_value').value;
  dialog.close(value); // отправить значение поля
};

document.querySelector('dialog').addEventListener('close', function() {
  alert(this.returnValue);
})

close(); получает значение .returnValue

к меню ↑

Преимущества элемента dialog

Тег dialog элемент HTML, для него не нужно подключать сторонние библиотеки jQuery или применять другие JavaScript методы. Браузер понимает что элемент dialog модальный, поэтому программы чтения с экрана знают, какой контент должен быть интерактивным.

Модальные диалоги на веб-странице размещаются упорядоченно в стек (верхний слой), и находится над другими элементами независимо от свойства z-index.

к меню ↑

Позиционировать dialog

По умолчанию, когда вы вызываете dialog.show() окно диалога располагается по центру окна просмотра. Позицию диалогового окна можно изменить свойством CSS, например top: 15px.

Еще нужно учитывать, что абсолютное позиционирование только для блока диалогового окна. Поэтому свойства position, overflow и проценты работать не будут.

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

к меню ↑

Несколько окон диалога

Если диалоги не модальные, они ведут себя как несколько элементов div. Браузер окно dialog откладывает в стек, вершина стека активное модальное диалоговое окно, которое блокирует все остальные. Всякий раз, когда модальное диалоговое окно открыто, оно помещается в вершину стека. Всякий раз, когда модальное диалоговое окно закрыто, оно удаляется из стека. Диалоги отображаются в порядке стека, активный диалог самый высокий.

к меню ↑

Поддержка

Для совместимости тега dialog с браузерами команда GoogleChrome написали dialog-polyfill