<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> актуален. Однако он поддерживается не всеми браузерами, поэтому для создания диалоговых окон рекомендуется использовать альтернативные методы.