Modal dialog

Dialogs provide important prompts in a user flow. They can:

Require an action (e.g., confirmations)
Communicate important messages (e.g., alerts, notifications)
Help users accomplish a task (e.g., form submission)

Use Cases:

Alerts – Notify users about system changes or warnings
Confirmations – Require user approval before proceeding
Quick Actions – Perform small tasks without leaving the page

Simple dialog

A basic dialog that interrupts the user with a message or information.

Uses the <dialog> HTML element for native modal behavior.
.show() method opens the dialog, .close() dismisses it.
Includes a close button inside the modal.

<button onclick="window.dialogplain.show();" class="btn">Open simple dialog</button>

<dialog id="dialog" class="dialog">
  <div class="dialog__body">...</div>
</dialog>

Advanced dialog

An enhanced dialog with header, body, and footer sections.

Includes a title in the header section.
The footer provides action buttons (e.g., cancel/confirm).
Uses .close() to dismiss the modal.

<button onclick="window.dialog.show();" class="btn">Open simple dialog</button>
          
<dialog id="dialog" class="dialog">
  <div class="dialog__header">...</div>
  <div class="dialog__body">...</div>
  <div class="dialog__footer">...</div>
</dialog>