<dialog>
- 25 января 2023
Что делает тег
Тег <dialog>
отображает диалоговое окно или другой интерактивный компонент.
Синтаксис тега <dialog>
<dialog open>
<h2>Пример модального диалога</h2>
<p>Это модальное диалоговое окно.</p>
<button>Закрыть</button>
</dialog>
Спецификация HTML
Тег является частью спецификации HTML Living Standard.
Семантический или нет
Тег <dialog>
считается семантическим, поскольку несёт в себе смысл и точно передаёт назначение своего содержимого.
Примеры использования
Простое диалоговое окно:
<button id="show-dialog-btn">>Показать диалог</button>
<dialog id="my-dialog">>
<p>Это простое диалоговое окно.</p>
<button id="close-dialog-btn">>Закрыть</button>
</dialog>
<script>
const showDialogBtn = document.querySelector('#show-dialog-btn');
const myDialog = document.querySelector('#my-dialog');
const closeDialogBtn = document.querySelector('#close-dialog-btn');
showDialogBtn.addEventListener('click', () => {
myDialog.showModal();
});
closeDialogBtn.addEventListener('click', () => {
myDialog.close();
});
</script>
Диалоговое окно с формой:
<button id="show-dialog-btn">>Показать диалог</button>
<dialog id="my-dialog">>
<form>
<label for="name">Имя:</label>
<input type="text" id="name" name="name"> required>
<button type="submit">Отправить</button>
</form>
<button id="close-dialog-btn">>Закрыть</button>
</dialog>
<script>
const showDialogBtn = document.querySelector('#show-dialog-btn');
const myDialog = document.querySelector('#my-dialog');
const closeDialogBtn = document.querySelector('#close-dialog-btn');
showDialogBtn.addEventListener('click', () => {
myDialog.showModal();
});
closeDialogBtn.addEventListener('click', () => {
myDialog.close();
});
</script>
Для чего использовать тег <dialog>
- Показать диалоговое окно с пользовательским контентом.
- Показать окно для подтверждения или отмены действия.
- Вывести сообщение или предупреждение для пользователя.
- Предоставить дополнительные опции или настройки.
Атрибуты тега <dialog>
open
— указывает, что диалог виден и активен.
Глобальные атрибуты
Тег поддерживает все глобальные атрибуты HTML.
Ограничения
Элемент <dialog>
поддерживается не всеми браузерами.
Нюансы
Если элемент <dialog>
содержит форму, то кнопка отправки формы не будет работать.
Поддержка браузерами
Не все браузеры поддерживают тег <dialog>
.
Актуальная информация — на caniuse.
Альтернативные теги
Альтернативных тегов для тега <dialog>
не существует.
Чем заменить тег
Элемент <dialog>
можно заменить модальным диалоговым окном, созданным с помощью JavaScript.
Актуальность
Тег <dialog>
актуален. Однако он поддерживается не всеми браузерами, поэтому для создания диалоговых окон рекомендуется использовать альтернативные методы.
Хотите узнать больше об HTML-тегах?
Прочитайте справочник по HTML или познакомьтесь с вёрсткой на интерактивных тренажёрах в HTML Academy.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше


Как правильно добавить секцию на страницу. Тег <section>
Синтаксис, примеры использования, основные атрибуты.
- 25 января 2023