Нативный HTML-элемент dialog и его возможности

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Все основные браузеры теперь поддерживают элемент <dialog />. Зачем добавлять этот HTML-элемент? Подобный функционал, особенно в части захвата фокуса, имеет юзерленд-код — код, который разработчики пишут для заполнения пробелов в браузере. Что ж, браузерные движки отреагировали на это, добавив эту функциональность непосредственно в браузер.

Захват фокуса

Что такое захват фокуса? Это функция, не позволяющая фокусу выходить за пределы определенного элемента. Этот элемент обычно содержит части, на которых можно фокусироваться.

Например, форма в модальном окне для подтверждения действия. Когда пользователь использует клавиатуру для навигации, он переходит к следующему фокусируемому элементу, например, кнопке.

Если пользователь дойдет до последнего фокусируемого элемента в модальном окне, то без захвата фокуса он перейдет к следующему фокусируемому элементу в объектной модели документа (DOM). При использовании ловушки фокуса вы переходите от последнего фокусируемого элемента обратно к первому фокусируемому элементу в родительском элементе.

В юзерленде разработчики смогли внедрить захват фокуса при помощи популярных пакетов, таких как focus-trap.

Элемент dialog для модальных диалогов

С элементом dialog вы получаете это бесплатно, хотя есть одна загвоздка. Если вы добавите на страницу элемент dialog с установленным атрибутом open, он станет видимым на странице, но захват фокуса не будет работать так, как вв модальном диалоге.

Из документации по API:

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

Чтобы улавливание фокуса работало, необходим JavaScript API. Вы можете вывести модальное окно на экран, вызвав метод showModal элемента HTMLDialogElement.

Обратите внимание, что вам нужно будет просмотреть этот CodePen в режиме полного просмотра, потому что по какой-то причине захват фокуса модального диалога не работает в режиме просмотра редактора CodePen.

See the Pen
<dialog> Modal Dialog by Nick Taylor (@nickytonline)
on CodePen.

Вы получаете не только захват фокуса, но и функцию закрытия модального окна (обычно такое закрытие ожидается при нажатии клавиши Escape).

Все это уже замечательно, но еще одной распространенной вещью, которую люди делали в юзерленде, было добавление фона, чтобы отгородить пользователей от взаимодействия со страницей. В элемент <dialog /> мы можем добавить псевдоэлемент ::backdrop, который сделает это за вас. Все, что вам нужно сделать, это придать ему стиль. Раскомментируйте следующий код в панели CSS в том же CodePen, чтобы увидеть это в действии:

dialog::backdrop {
background-color: purple;
opacity: 0.55;
filter: blur(100px);
}

Элемент dialog для немодальных диалогов

Структура элемента немодального диалога такая же, как и модального. Основное отличие заключается в том, что для показа немодального диалога необходимо вызвать метод show элемента HTMLDialogElement.

При использовании немодального диалога пользователь не лишается возможности перемещаться по остальной части страницы, то есть фокус не захватывается, а клавиша Escape не приводит к автоматическому закрытию диалога.

See the Pen
<dialog> Non-Modal Dialog by Nick Taylor (@nickytonline)
on CodePen.

Закрытие диалога

Чтобы закрыть диалог или модальное окно, мы можем воспользоваться методом close элемента HTMLDialogElement.

const modal = document.querySelector(“dialog”);

// Какая-нибудь кнопка в диалоге, имеющая зарегистрированный слушатель события click
modal.querySelector(“button”).addEventListener(“click”, () => {
modal.close();
});