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

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

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/.