HTML - тег <dialog> является одним из элементов HTML5. Он используется для создания собственного диалогового окна, с которым пользователь взаимодействует и выполняет определенные действия. Например, с помощью этого элемента вы можете создавать всплывающие сообщения или формы. По умолчанию диалоговое окно скрыто от просмотра. Он активируется атрибутом open.
Тег <dialog> - синтаксис и код
Тег <dialog> представлен парами. Содержимое записывается между открывающим (<dialog>) и закрывающим (</dialog>) тегами.
Пример разметки элемента <dialog>:
<!DOCTYPE html>
<html>
<body>
<h1>Элемент dialog</h1>
<p>Это текст.</p>
<p>Это текст.</p>
<dialog open>Это открытое диалоговое окно</dialog>
<p>Это текст.</p>
<p>Это текст.</p>
</body>
</html>
Определение и использование
- HTML - тег
<dialog> определяет диалоговое окно или подокно;
- Элемент
<dialog> позволяет легко создавать всплывающие диалоговые окна и модальные окна на веб-странице.
Чтобы отобразить/скрыть контент, нам понадобится Javascript.
Если элементы <form> указаны с атрибутом Method="dialog", их можно комбинировать в диалоговом окне. Если такая форма предоставлена, диалог закрывается с атрибутом returnValue.
★ Примечание: для стилизации элемента <dialog> вы можете использовать псевдоэлемент CSS ::backdrop.
Поддержка <dialog> браузерами
 |
✅ Поддерживает |
 |
✅ Поддерживает |
 |
✅ Поддерживает |
 |
✅ Поддерживает |
 |
✅ Поддерживает |
Атрибуты
| Атрибут |
Значение |
Описание |
| open |
open |
Указывает, что элемент диалога активен и что пользователь может с ним взаимодействовать |
Глобальные атрибуты
Тег <dialog> также поддерживает глобальные атрибуты в HTML
Атрибуты событий
Тег <dialog> также поддерживает атрибуты событий в HTML
Связанные страницы
Руководство по HTML: семантические элементы HTML
Полный список всех доступных тегов HTML см. в Справочнике по тегам HTML.
