Элемент диалога — модальные окна стали проще

Эйдзи Китамура

В Chrome Canary реализована поддержка элемента диалога за флагом. Элемент dialog можно использовать для всплывающих окон на веб-странице.

  • show() : Открыть диалог.
  • close() : Закрыть диалог. Принимает необязательный аргумент, который, если он присутствует, имеет значение dialog.returnValue .
  • showModal() : открыть модальное диалоговое окно.
  • ::backdrop : псевдоэлемент для оформления фона модального диалога.
  • Событие close : вызывается при закрытии диалога.

Обновление от 16 декабря 2013 г.

Элемент dialog теперь поддерживает:

  • Событие cancel : вызывается при нажатии клавиши Escape в модальном диалоговом окне. Это событие можно отменить с помощью event.preventDefault() .
  • Атрибут autofocus : первый элемент управления формы в модальном диалоговом окне, имеющий атрибут autofocus , если таковой имеется, будет в фокусе при отображении диалогового окна. Если такого элемента нет, фокусируется первый фокусируемый элемент.
  • form[method="dialog"] : действует только внутри диалога. При отправке формы он закрывает диалоговое окно и устанавливает для параметра dialog.returnValue значение использованной кнопки отправки.

Подробности можно узнать с помощью живой демонстрации и полифилла .

Включите его, включив «Включить экспериментальные функции веб-платформы» в chrome://flags/.