HTML-тег `<dialog>`

Тег <dialog> является одним из элементов HTML5. Он используется для создания нативного диалогового окна, с которым пользователь может взаимодействовать и выполнять определенные действия. Например, с помощью этого элемента можно создавать всплывающие сообщения или формы. По умолчанию диалоговое окно скрыто. Оно становится видимым при установке атрибута open.

Для отображения или скрытия содержимого требуется JavaScript API.

Если <form> элементы имеют атрибут method="dialog", их можно объединить внутри диалога. При наличии такой формы диалог закрывается при её отправке, а свойство returnValue сохраняет значение нажатой кнопки.

Для стилизации области позади элемента <dialog> можно использовать псевдоэлемент CSS ::backdrop.

Синтаксис

Тег <dialog> является парным. Содержимое размещается между открывающим (<dialog>) и закрывающим (</dialog>) тегами.

Пример использования HTML-тега `<dialog>`:

HTML-тег <dialog>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      dialog {
        width: 40%;
      }
    </style>
  </head>
  <body>
    <div>
      <dialog id="DialogExample">
        <p>
          Here is some text for example.
        </p>
        <button id="hide">Close dialog text</button>
      </dialog>
      <button id="show">Show dialog text</button>
    </div>
    <script type="text/javascript">
      (function() { var dialog = document.getElementById('DialogExample'); document.getElementById('show').onclick = function() { dialog.showModal(); }; document.getElementById('hide').onclick = function() { dialog.close(); }; })();
    </script>
  </body>
</html>

Try it Yourself »

Результат

пример диалога

Атрибуты

Атрибут	Значение	Описание
open	open	Указывает, что диалоговое окно активно, и пользователь может с ним взаимодействовать.

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

Как стилизовать HTML-тег <dialog>

Вы можете настроить внешний вид диалога и его фоновое затемнение с помощью CSS. Псевдоэлемент ::backdrop применяется к области позади диалога.

css

dialog {
  border: 1px solid #ccc;
  border-radius: 0.5em;
  padding: 1em;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

Примечание о методах JavaScript: В примере используется dialog.showModal(), который отображает диалог в модальном режиме (блокируя взаимодействие с остальной частью страницы). Чтобы отобразить немодальный диалог, позволяющий взаимодействовать с другими элементами, используйте вместо этого dialog.show().

Практика

Какие атрибуты поддерживает HTML-тег <dialog>?

<open>: Этот логический атрибут указывает, что диалоговое окно доступно и/ или интерактивно.<modal>: Этот атрибут требует взаимодействия с пользователем и тем самым предотвращает взаимодействие с остальной частью веб-страницы до закрытия диалогового окна.Тег <dialog> не поддерживает никаких атрибутов.<returnValue>: В отличие от open и showModal(), это не отражает атрибут содержимого, а его цель — хранить строку, которая может быть сгенерирована и использована при закрытии диалогового окна.

HTML-тег <dialog> ​

Синтаксис ​

Пример использования HTML-тега <dialog>: ​

Результат ​