The dialog element

The HTML dialog element provides in-page dialog box functionality. A dialog exists in the DOM tree and can be styled using ordinary CSS. See a minimal demo here and a fancier demo here.

Note: The demos are best viewed in Chrome Canary or Dev.

Dialog has four main features:

Centered-in-viewport positioning

By default, a dialog is centered vertically in the viewport when opened. It is still position: absolute so can be scrolled away. The viewport centering occurs regardless of the dialog's position in the DOM tree.

Demo

Modality

Dialogs can be modal. When a modal dialog is opened, it blocks the rest of the document. There is a "pending dialog" stack to handle the case of multiple modal dialogs.

Demo

Top layer

A new stacking layer on top of the existing CSS stacking contexts handles "always on top" behavior. Dialog and the Fullscreen spec both use the top layer. Modal dialogs reside in the top layer.

Demo

Anchored positioning (not implemented)

Dialogs can be anchored to arbitary elements or MouseEvents.

Here is a basic snippet to use dialog.

HTML:

<dialog id="dialog">This is a dialog.</dialog>

JS:

document.getElementById('dialog').show();
[...]
document.getElementById('dialog').close();