dialog element: Modals made easy
Google Developers Logo

Progressive Web App Road Show 2016

Stopping in New York, Chicago, Austin, Toronto, Mountain View and Seattle. Learn more and sign up now.

Chrome Canary has landed support for the dialog element behind a flag. The dialog element can be used for popups in a web page.

  • show(): Open dialog.
  • close(): Close dialog. Takes an optional argument which if present dialog.returnValue is set to.
  • showModal(): Open modal dialog.
  • ::backdrop: Pseudo-element to style background behind a modal dialog.
  • close event: Fired when a dialog is closed.

Update on Dec 16th 2013

The dialog element now supports:

  • cancel event: Fired when the Escape key is pressed on a modal dialog. This event can be canceled using event.preventDefault().
  • autofocus attribute: The first form control in a modal dialog that has the autofocus attribute, if any, will be focused when the dialog is shown. If there is no such element, the first focusable element is focused.
  • form[method="dialog"]: Only valid inside a dialog. Upon form submission, it closes the dialog and sets dialog.returnValue to the value of the submit button that was used.

Check out details with a live demo and polyfill.

Turn it on by enabling “Enable experimental Web Platform features” in about://flags.

Profile photo of Eiji Kitamura

Developer Advocate in Tokyo

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Terms of Service.