Справочник HTML

Тег <dialog>: нативное модальное окно

<dialog> создаёт нативное диалоговое окно. Метод showModal() открывает его поверх страницы и помещает остальной документ в недоступный для взаимодействия фон.

Рабочий пример

<button id="open">Удалить файл</button>
<dialog id="confirm">
  <h2>Удалить файл?</h2>
  <p>Это действие нельзя отменить.</p>
  <form method="dialog">
    <button value="cancel">Отмена</button>
    <button value="confirm">Удалить</button>
  </form>
</dialog>

Форма с method="dialog" закрывает окно после выбора кнопки, а значение доступно через returnValue. Псевдоэлемент ::backdrop оформляет затемнение позади модального окна.

Когда применять

Открывай диалог только после явного действия. Заголовок должен объяснять цель, а кнопки — последствия. Для обычного раскрывающегося текста лучше использовать details, а не модальное окно.

Проверь пример самостоятельно: измени исходные данные, убери одну строку и сравни результат. Такой короткий эксперимент помогает увидеть роль каждого свойства или метода и не превращает обучение в механическое копирование.

Частые ошибки

• Открывать dialog через атрибут open вместо showModal и терять модальность
• Не давать заметную кнопку закрытия
• Помещать в окно слишком длинный сценарий