<dialog>

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

Оглавление:
  1. Элемент dialog
  2. Открыть и закрыть диалог
  3. Стиль для диалогового окна
  4. Модальное диалоговое окно
  5. Фон для диалогового окна
  6. Вод значений в диалоговом окне
  7. Преимущества элемента dialog
  8. Позиционировать dialog
  9. Несколько окон диалога
  10. Поддержка

Озеро Самарцы - Отдых в Крыму для всей семьи!
Адрес: Крым, Белогорский район, с. Зуя
Тел: +7(978)1176627 http://samartsy.ru/

Элемент 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>

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

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

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

К началу

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

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

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

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

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

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

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

К началу

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

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

К началу

Поддержка

Таблица поддержки браузерами: “<dialog>”

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