<dialog> HTML

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

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

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

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

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

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

Can I Use dialog? Data on support for the dialog feature across the major browsers from caniuse.com.

Полифилы для включения поддержки:

Синтаксис

<dialog open>
...
</dialog>

Закрывающий тег обязателен.

WAI ARIA

Значение role по умолчанию: dialog

Допустимые значения role:

  • alertdialog

Атрибуты

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

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

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

Примеры

Пример 1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>dialog</title>
        <style>
            body {
                background: url(/example/image/shark.jpg) no-repeat;
                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>

Пример 2

<dialog open>
  <p>Greetings, one and all!</p>
</dialog>

Пример 3

<!-- Простой попап диалог с формой -->
<dialog id="favDialog">
  <form method="dialog">
    <section>
      <p><label for="favAnimal">Favorite animal:</label>
      <select id="favAnimal">
        <option></option>
        <option>Brine shrimp</option>
        <option>Red panda</option>
        <option>Spider monkey</option>
      </select></p>
    </section>
    <menu>
      <button id="cancel" type="reset">Cancel</button>
      <button type="submit">Confirm</button>
    </menu>
  </form>
</dialog>

<menu>
  <button id="updateDetails">Update details</button>
</menu>

<script>
  (function() {
    var updateButton = document.getElementById('updateDetails');
    var cancelButton = document.getElementById('cancel');
    var favDialog = document.getElementById('favDialog');

    // Update button opens a modal dialog
    updateButton.addEventListener('click', function() {
      favDialog.showModal();
    });

    // Form cancel button closes the dialog box
    cancelButton.addEventListener('click', function() {
      favDialog.close();
    });

  })();
</script>