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
Dialog has four main features:
By default, a dialog is centered vertically in the viewport when opened. It
position: absolute so can be scrolled away. The viewport
centering occurs regardless of the dialog's position in the DOM tree.
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.
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.
Dialogs can be anchored to arbitary elements or
Here is a basic snippet to use
<dialog id="dialog">This is a dialog.</dialog>
document.getElementById('dialog').show(); [...] document.getElementById('dialog').close();