Code Ready | Frontend
Разбираем HTMLDialogElement — нативная модель модальных интерфейсов в браузере!
Несмотря на большое количество UI-библиотек, модальные окна часто остаются одним из компонентов, где разработчики повторяют одну и ту же инфраструктуру: создание overlay, блокировку прокрутки, управление focus lifecycle, обработку Escape, восстановление фокуса и синхронизацию состояния компонента.
HTMLDialogElement решает эту задачу на уровне платформы. Элемент <dialog> является частью HTML Standard и предоставляет браузерную модель поведения для диалоговых интерфейсов без необходимости вручную воспроизводить базовую механику. Базовая структура:
<dialog id="confirmDialog">
<p>Удалить запись?</p>
<button value="cancel">
Отмена
</button>
<button value="confirm">
Удалить
</button>
</dialog>
После получения ссылки на элемент становится доступен полный API HTMLDialogElement:
const dialog = document.querySelector(
'#confirmDialog'
);
У элемента есть два принципиально разных режима открытия.show() переводит <dialog> в состояние отображения без модального поведения:
dialog.show();
Такой режим используется для немодальных сценариев, когда пользователь может продолжать взаимодействовать с остальным интерфейсом.
showModal() создаёт настоящий modal dialog:
dialog.showModal();
В этом режиме браузер добавляет элемент в специальный top layer, устанавливает модальное состояние, ограничивает взаимодействие с остальным документом и управляет фокусом внутри диалога.
Это отличается от обычного display: block, поскольку модальное поведение реализуется самим браузером, а не JavaScript-кодом приложения. Закрытие выполняется через:
dialog.close();
При необходимости можно передать результат завершения операции:
dialog.close('confirmed');
console.log(
dialog.returnValue
);
returnValue позволяет отделить состояние интерфейса от бизнес-логики. Например, один компонент диалога может использоваться для подтверждения удаления, отмены действия или выбора варианта.
Для форм внутри <dialog> существует специальный механизм method="dialog":
<form method="dialog">
<button value="cancel">
Отмена
</button>
<button value="confirm">
Подтвердить
</button>
</form>
При отправке такой формы браузер автоматически закрывает диалог и записывает значение активной кнопки в returnValue. Состояние элемента доступно через стандартное свойство:
console.log(
dialog.open
);
Для интеграции с состоянием приложения используются события жизненного цикла. После закрытия:
dialog.addEventListener(
'close',
() => {
console.log(
dialog.returnValue
);
}
);
Попытка закрытия через Escape вызывает событие cancel:
dialog.addEventListener(
'cancel',
event => {
event.preventDefault();
}
);
Это позволяет реализовать сценарии, где пользователь должен явно подтвердить действие перед закрытием.
Визуальное оформление модального слоя также предусмотрено платформой:
dialog::backdrop {
background: rgb(0 0 0 / 0.5);
}
Главное преимущество <dialog> заключается в переносе части ответственности из прикладного кода в браузерный runtime: управление фокусом, modal top layer, клавиатурное взаимодействие и базовая интеграция с accessibility.
🔥 Для стандартных модальных сценариев HTMLDialogElement позволяет избежать реализации собственного modal framework. Дополнительная логика требуется только там, где интерфейс выходит за пределы поведения, предусмотренного HTML Standard.
📣 Code Ready | #практика
38 · 1.7K ·