Google is committed to advancing racial equity for Black communities. See how.

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.

: Open dialog. close() : Close dialog. Takes an optional argument which if present dialog.returnValue is set to.

: Close dialog. Takes an optional argument which if present is set to. showModal() : Open modal dialog.

: Open modal dialog. ::backdrop : Pseudo-element to style background behind a modal dialog.

: 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() .

event: Fired when the Escape key is pressed on a modal dialog. This event can be canceled using . 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.

attribute: The first form control in a modal dialog that has the 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 chrome://flags/.