Содержание
HTML-элемент диалог может быть модальным и немодальным.
Из коробки модальный диалог умеет закрываться по нажатию на Escape. Немодальный не умеет.
Также и тот, и другой не могут закрываться по клику вне диалога.
И этой фичи очень не хватало, так как кастомные реализации модалок это умеют, пользователи к этому привыкли. И если разработчики использовали нативный dialog, то приходилось эту штуку реализовывать руками через JS.
Неудобно и бесяче.
Однако HTML спека не стоит на месте — теперь у нас есть атрибут closedby, который решает эту проблему.
closedBy
Атрибут меняет дефолтные способы закрытия диалога. Он имеет три значения:
any
<dialog closedby="any">Диалог может быть закрыт:
- по клику вне диалога
- нажатием клавиши Escape на десктопе
- нажатием на кнопку назад или свайп назад на мобильных девайсах
- нажатием на кнопку назад на игровых контроллерах
- применением закрытия через ассистивные технологии
- программно:
dialog.close()/command="close"
closerequest
<dialog closedby="closerequest">Диалог может быть закрыт:
- нажатием клавиши Escape на десктопе
- нажатием на кнопку назад или свайп назад на мобильных девайсах
- нажатием на кнопку назад на игровых контроллерах
- применением закрытия через ассистивные технологии
- программно:
dialog.close()/command="close"
none
<dialog closedby="none">Диалог может быть закрыт:
- программно:
dialog.close()/command="close"
Демки
Прикольно, что этот атрибут работает одинаково и для модальных диалогов, и для немодальных.
Собрал демки на CodePen, чтобы можно было потыкать: модальный и немодальный.
Атрибут пока доступен только в Chrome 134+.