Тег <dialog>

Описание

Тег <dialog> создает модальное или немодальное диалоговое окно, которое можно использовать для форм, уведомлений и другого интерактивного контента. Поддерживает нативный API для управления состоянием.

Простое модальное окно:
<dialog id="simpleDialog"> <p>Это нативное диалоговое окно</p> <button onclick="document.getElementById('simpleDialog').close()"> Закрыть </button> </dialog> <button onclick="document.getElementById('simpleDialog').showModal()"> Открыть диалог </button>
Диалог с формой:
<dialog id="formDialog"> <form method="dialog"> <h3>Введите данные</h3> <input type="text" placeholder="Имя" required> <button type="submit">Подтвердить</button> <button type="button" onclick="this.closest('dialog').close()"> Отмена </button> </form> </dialog> <button onclick="document.getElementById('formDialog').showModal()"> Открыть форму </button>
Стилизация и анимация:
<style> dialog { border: none; border-radius: 8px; box-shadow: 0 0 20px rgba(0,0,0,0.3); width: 80%; max-width: 500px; animation: fadeIn 0.3s ease-out; } dialog::backdrop { background: rgba(0,0,0,0.5); } @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } </style> <dialog id="styledDialog"> <p>Стилизованное диалоговое окно</p> <button onclick="this.closest('dialog').close()">OK</button> </dialog>

Ключевые методы и свойства:

  • showModal() - открывает модальное окно (с фоном)
  • show() - открывает немодальное окно
  • close() - закрывает диалог
  • returnValue - значение, возвращаемое при закрытии
  • ::backdrop - псевдоэлемент для стилизации фона

Преимущества использования:

  • Нативная реализация без зависимостей
  • Встроенная доступность (фокус-ловушка, ARIA-роли)
  • Поддержка форм через method="dialog"
  • Возможность анимации через CSS
  • События close и cancel

Советы по использованию:

  • Всегда добавляйте способ закрытия диалога
  • Для сложных сценариев используйте JavaScript-контроллеры
  • Тестируйте в разных браузерах (может потребоваться полифил для старых версий)
  • Используйте autofocus для элементов формы внутри диалога

Тег <dialog> предоставляет современный стандартизированный способ создания диалоговых окон в веб-приложениях.

Атрибуты

open Указывает, что диалоговое окно активно и доступно для взаимодействия
accesskey Определяет горячую клавишу для активации/фокусировки элемента
class Задает один или несколько классов CSS для стилизации элемента
contenteditable Указывает, может ли пользователь редактировать содержимое элемента
data-* Используется для хранения пользовательских данных в элементах
dir Определяет направление текста: слева направо (ltr) или справа налево (rtl)
hidden Скрывает элемент, делая его невидимым и недоступным для пользователя
id Уникальный идентификатор элемента в документе
lang Определяет язык содержимого элемента
spellcheck Указывает, должна ли проверяться орфография в содержимом элемента
style Позволяет задавать CSS-стили непосредственно в атрибуте элемента
tabindex Определяет порядок перехода между элементами при нажатии Tab
title Задает всплывающую подсказку при наведении на элемент
translate Указывает, должен ли переводиться текст внутри элемента

Поддержка браузерами
79.0 37.0 24.0 98.0 15.4