Struct Dialog 

pub struct Dialog;

The <dialog> element - represents a dialog box or other interactive component.

Purpose

The <dialog> element represents a dialog box, modal, or subwindow that overlays the main content. Can be shown modally (blocking interaction with the rest of the page) or non-modally. Provides built-in functionality for overlays, keyboard management (ESC to close), and focus trapping without requiring JavaScript libraries.

Content Categories

• Flow Content

Permitted Content Model

• Flow content

Common Use Cases

• Modal confirmation dialogs
• Alert and notification popups
• Login and signup forms
• Settings and preferences panels
• Image lightboxes and galleries

Key Attributes

• open: Makes the dialog visible (use JavaScript’s show() or showModal() methods instead)

Example

<!-- Basic dialog -->
<dialog id="myDialog">
  <h2>Dialog Title</h2>
  <p>This is a dialog box.</p>
  <button onclick="this.closest('dialog').close()">Close</button>
</dialog>
<button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>

<!-- Confirmation dialog -->
<dialog id="confirmDialog">
  <form method="dialog">
    <h2>Confirm Action</h2>
    <p>Are you sure you want to proceed?</p>
    <button value="cancel">Cancel</button>
    <button value="confirm">Confirm</button>
  </form>
</dialog>

<!-- Login dialog -->
<dialog id="loginDialog">
  <h2>Log In</h2>
  <form method="dialog">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" required>
     
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>
     
    <button type="submit">Log In</button>
    <button type="button" onclick="this.closest('dialog').close()">Cancel</button>
  </form>
</dialog>

<!-- Dialog with backdrop -->
<dialog id="modalDialog">
  <h2>Modal Dialog</h2>
  <p>This dialog blocks interaction with the rest of the page.</p>
  <button onclick="document.getElementById('modalDialog').close()">Close</button>
</dialog>
<button onclick="document.getElementById('modalDialog').showModal()">Show Modal</button>

<!-- Alert dialog -->
<dialog id="alertDialog">
  <div role="alert">
    <h2>Warning!</h2>
    <p>This action cannot be undone.</p>
    <button onclick="this.closest('dialog').close()">OK</button>
  </div>
</dialog>

<!-- Non-modal dialog -->
<dialog id="nonModalDialog">
  <h2>Non-Modal Dialog</h2>
  <p>You can still interact with the page behind this dialog.</p>
  <button onclick="this.closest('dialog').close()">Close</button>
</dialog>
<button onclick="document.getElementById('nonModalDialog').show()">Show Non-Modal</button>

<!-- Dialog with return value -->
<dialog id="colorDialog">
  <form method="dialog">
    <h2>Choose a color</h2>
    <button value="red">Red</button>
    <button value="blue">Blue</button>
    <button value="green">Green</button>
  </form>
</dialog>
<script>
  const dialog = document.getElementById('colorDialog');
  dialog.addEventListener('close', () => {
    console.log('Selected color:', dialog.returnValue);
  });
</script>

Accessibility

• Focus is automatically moved to the dialog when opened with showModal()
• ESC key closes modal dialogs by default
• Backdrop click behavior can be customized
• Use appropriate ARIA roles (role=“dialog” or role=“alertdialog”)
• Provide clear close mechanisms
• Ensure focus returns to triggering element on close
• Use aria-labelledby or aria-label to identify the dialog
• Trap focus within modal dialogs

WHATWG Specification

• 4.11.3 The dialog element

Trait Implementations

impl HtmlElement for Dialog

const TAG: &'static str = "dialog"

The HTML tag name (e.g., “div”, “span”, “img”).

const VOID: bool = false

Whether this is a void element (self-closing, no children allowed).

impl<T: FlowContent> CanContain<T> for Dialog

impl FlowContent for Dialog