Разбираем HTMLDialogElement — нативная модель модальных интерфейсов в… — Code Ready

Code Ready | Frontend@code_ready · 21.7K subscribers Open in TelegramOpen

Разбираем 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.