Dialog Element API Demo

The HTML <dialog> element provides a native way to create modal and non-modal dialog boxes, with built-in accessibility features and backdrop handling.

Dialog Element API: checking...

API Support

Basic Modal Dialog

Modal dialogs block interaction with the rest of the page:

Last action:
-

Non-Modal Dialog

Non-modal dialogs allow interaction with the page:

Confirm Dialog

A custom confirm dialog that returns user choice:

User choice:
-

Form Dialog

Dialog with form that uses method="dialog":

Form data:
-

Alert Variants

Different styled dialogs for various purposes:

Stacked Dialogs

Multiple dialogs can be stacked:

Event Log

Dialog events will appear here...

Basic Modal Dialog

This is a modal dialog. The backdrop prevents interaction with the page behind it.

Press Escape or click outside to close (if enabled).

Non-Modal Dialog

This dialog allows interaction with the page behind it.

You can still click buttons and scroll the page.

Confirm Action

Are you sure you want to proceed with this action?

This action may have consequences.

User Information

Alert

Alert message

First Dialog

This is the first dialog in the stack.

Click the button below to open another dialog on top.

Second Dialog

This is the second dialog, stacked on top of the first.

You can stack as many dialogs as needed.

Third Dialog

This is the third and final dialog in the stack.

Close dialogs in reverse order by pressing Escape or clicking Close.