dialog element - modals made easy
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.returnValueis set to.
showModal(): Open modal dialog.
::backdrop: Pseudo-element to style background behind a modal dialog.
closeevent: Fired when a dialog is closed.
Update on Dec 16th 2013
dialog element now supports:
cancelevent: Fired when the Escape key is pressed on a modal dialog. This event can be canceled using
autofocusattribute: The first form control in a modal dialog that has the
autofocusattribute, 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.returnValueto the value of the submit button that was used.
Turn it on by enabling "Enable experimental Web Platform features" in chrome://flags/.