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:

Open Modal Dialog

Last action:

Non-Modal Dialog

Non-modal dialogs allow interaction with the page:

Open Non-Modal DialogClose Non-Modal

Confirm Dialog

A custom confirm dialog that returns user choice:

Show Confirm Dialog

User choice:

Form Dialog

Dialog with form that uses method="dialog":

Open Form Dialog

Form data:

Alert Variants

Different styled dialogs for various purposes:

Success AlertWarning AlertError AlertInfo Alert

Stacked Dialogs

Multiple dialogs can be stacked:

Open First Dialog

Event Log

Clear 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).

CancelOK

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.

No, CancelYes, Proceed

User Information

×

Name

Email

RoleDeveloperDesignerManagerOther

Message

CancelSubmit

Alert

×

Alert message

OK

First Dialog

×

This is the first dialog in the stack.

Click the button below to open another dialog on top.

CloseOpen Second Dialog

Second Dialog

×

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

You can stack as many dialogs as needed.

CloseOpen Third Dialog

Third Dialog

×

This is the third and final dialog in the stack.

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

Close