dialog — диалоговое окно

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

<dialog open>
  <h2>Пример модального диалога</h2>
  <p>Это модальное диалоговое окно.</p>
  <button>Закрыть</button>
</dialog>

Атрибут open — указывает, что диалог виден и активен.

Примеры использования

Простое диалоговое окно:

<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> можно заменить модальным диалоговым окном, созданным с помощью JavaScript.