Что делает тег

Тег <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.


«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше

<div>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<dl>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<option>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<ul>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<video>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<datalist>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023

<caption>

Синтаксис, примеры использования, основные атрибуты.

  • 25 января 2023