This page demonstrates HTML's <dialog> element. If your browser does not have native support, then support is provided by the polyfill.
Native support:
I'm a modal dialog! This blocks the page from being accessed behind me, and is a core reason <dialog> is useful.
You can also hit the ESC on your keyboard to close the top-most modal dialog.
This dialog opens but does not block the page from being accessed. It was opened with dialog.show().
Dialog adds a new HTML form type: <form method="dialog">.
Submitting the form doesn't submit to a new page, but rather, closes the dialog by default.
(It generates a submit event, which if not prevented, closes the dialog.)
Try clicking on one of the buttons below!
This dialog adds a handler on its cancel event, preventing it. This stops the ESC key from closing the dialog.
You have to click the button below (or you could not have a button, and only close the dialog some other way).
This shows opening multiple modal dialogs.
This repurposes a dialog as a sidebar!
While the dialog, by default, shows centered where it was opened, it's easy to place it in fixed positions on your page.
Click the backdrop of the dialog to change its color.
This works by adding a click handler on the <dialog> but wrapping the normal contents with another element.
If clicks are detected on the dialog directly, then we know the backdrop was clicked.
See the polyfill README on how to style the backdrop itself.