Тег <dialog>: диалоговое окно
Чем модальный диалог отличается от немодального и что нужно предусмотреть для управления фокусом.
Зачем нужен этот элемент
dialog обозначает диалоговое окно. В модальном режиме оно появляется в верхнем слое и делает остальную страницу недоступной для взаимодействия до закрытия. Немодальный вариант этого не делает. Само добавление open показывает именно немодальное окно.
Для модального открытия обычно используют метод showModal(), для немодального — show(). Методы требуют JavaScript, который отключён в учебной песочнице. Здесь показано только статическое открытое состояние. Полноценный компонент должен иметь понятное название, способ закрытия и продуманное возвращение фокуса.
Синтаксис и пример
<dialog open aria-labelledby="dialog-title">
<h2 id="dialog-title">Учебный диалог</h2>
<p>Это немодальный статический пример. Управление окном добавляется отдельно.</p>
</dialog>Что важно в разметке
| Параметр | Как использовать |
|---|---|
| open | Начальное видимое немодальное состояние. |
| showModal() | Открытие модального диалога через JavaScript. |
| close() | Закрытие через JavaScript. |
| aria-labelledby | Связывает диалог с его заголовком. |
Частая ошибка
Небольшая практика
Измените заголовок и текст статического окна. При переносе в приложение добавьте реальное открытие и закрытие, проверку Escape и возврат фокуса на кнопку вызова.
Разберите также <button>, <form>: эти элементы пригодятся в том же интерфейсе.