<dialog> ✨ HTML5

Defines a dialog box or window

Definition and Usage

The <dialog> element establishes a dialog box or subwindow. It makes it easy to create popup dialogs and modals on a web page.

By default, the <dialog> element is hidden. Use the open attribute or JavaScript methods to display it.

Tip: The <dialog> element provides native modal and non-modal dialog functionality without requiring complex JavaScript.

Tip: Use showModal() to open as a modal with a backdrop, or show() to open as a non-modal dialog.

Browser Support

The <dialog> tag is an HTML5 element with the following browser support:

Chrome

37+

Firefox

98+

Safari

15.4+

Edge

79+

Opera

24+

Attributes

The <dialog> tag also supports the Global Attributes in HTML.

The <dialog> tag has the following specific attribute:

Attribute	Value	Description
open	open	Specifies that the dialog should be visible (open) by default

JavaScript Methods

The <dialog> element provides three important JavaScript methods:

Method	Description
show()	Opens the dialog as a non-modal (user can still interact with content outside the dialog)
showModal()	Opens the dialog as a modal with a backdrop (prevents interaction with outside content)
close()	Closes the dialog

Examples

Basic Dialog

Create a simple dialog with the open attribute:

Example
<dialog open>
  <p>This is a basic dialog box.</p>
  <button>Close</button>
</dialog>

Modal Dialog with JavaScript

Open a modal dialog using JavaScript:

Example
<button onclick="showDialog()">Open Modal</button>

<dialog id="myDialog">
  <h2>Modal Dialog</h2>
  <p>This is a modal dialog with a backdrop.</p>
  <button onclick="closeDialog()">Close</button>
</dialog>

<script>
  const dialog = document.getElementById('myDialog');

  function showDialog() {
    dialog.showModal();
  }

  function closeDialog() {
    dialog.close();
  }
</script>

Dialog with Form

Use a dialog with a form element:

Example
<button onclick="document.getElementById('formDialog').showModal()">Open Form</button>

<dialog id="formDialog">
  <form method="dialog">
    <h2>Contact Form</h2>
    <label>Name: <input type="text" name="name" required></label><br><br>
    <label>Email: <input type="email" name="email" required></label><br><br>
    <button type="submit">Submit</button>
    <button type="button" onclick="this.closest('dialog').close()">Cancel</button>
  </form>
</dialog>

Dialog with JavaScript Control

Full control with event listeners:

Example
<button id="openBtn">Show Dialog</button>

<dialog id="controlDialog">
  <h2>Controlled Dialog</h2>
  <p>This dialog can be closed with the Escape key or close button.</p>
  <button id="closeBtn">Close</button>
</dialog>

<script>
  const dialog = document.getElementById('controlDialog');
  const openBtn = document.getElementById('openBtn');
  const closeBtn = document.getElementById('closeBtn');

  openBtn.addEventListener('click', () => {
    dialog.showModal();
  });

  closeBtn.addEventListener('click', () => {
    dialog.close();
  });

  // Listen for close event
  dialog.addEventListener('close', () => {
    console.log('Dialog was closed');
  });
</script>

Styled Dialog

Customize the dialog appearance with CSS:

Example
<style>
  dialog {
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    padding: 32px;
    max-width: 500px;
  }

  dialog::backdrop {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
  }

  dialog h2 {
    margin-top: 0;
    color: #10b981;
  }

  dialog button {
    background: #10b981;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
  }

  dialog button:hover {
    background: #059669;
  }
</style>

<button onclick="document.getElementById('styledDialog').showModal()">Open Styled Dialog</button>

<dialog id="styledDialog">
  <h2>Beautiful Dialog</h2>
  <p>This dialog has custom styling applied.</p>
  <button onclick="this.closest('dialog').close()">Close</button>
</dialog>

Confirmation Dialog

Create a confirmation dialog pattern:

Example
<button onclick="confirmDelete()">Delete Item</button>

<dialog id="confirmDialog">
  <h3>Confirm Delete</h3>
  <p>Are you sure you want to delete this item? This action cannot be undone.</p>
  <div style="display: flex; gap: 10px; justify-content: flex-end;">
    <button onclick="this.closest('dialog').close('cancel')">Cancel</button>
    <button onclick="this.closest('dialog').close('confirm')" style="background: #dc3545;">Delete</button>
  </div>
</dialog>

<script>
  function confirmDelete() {
    const dialog = document.getElementById('confirmDialog');
    dialog.showModal();

    dialog.addEventListener('close', () => {
      if (dialog.returnValue === 'confirm') {
        console.log('Item deleted');
        // Perform delete action
      }
    }, { once: true });
  }
</script>

Custom Dialog with Content

Build a feature-rich dialog:

Example
<button onclick="document.getElementById('customDialog').showModal()">View Details</button>

<dialog id="customDialog" style="width: 600px; padding: 0;">
  <div style="padding: 24px; border-bottom: 1px solid #e5e7eb;">
    <h2 style="margin: 0;">Product Details</h2>
  </div>
  <div style="padding: 24px;">
    <h3>Premium Widget</h3>
    <p>This is a high-quality widget with amazing features.</p>
    <ul>
      <li>Durable construction</li>
      <li>5-year warranty</li>
      <li>Free shipping</li>
    </ul>
    <p><strong>Price:</strong> $99.99</p>
  </div>
  <div style="padding: 24px; border-top: 1px solid #e5e7eb; display: flex; gap: 10px; justify-content: flex-end;">
    <button onclick="this.closest('dialog').close()">Close</button>
    <button style="background: #10b981; color: white;">Add to Cart</button>
  </div>
</dialog>

Dialog vs Modal Comparison

Feature	show() - Non-Modal	showModal() - Modal
Backdrop	No backdrop	Dark backdrop behind dialog
Interaction	Can interact with page content	Cannot interact with page content
ESC Key	Does not close dialog	Closes the dialog
Focus Trap	No focus trap	Focus is trapped inside dialog
Use Case	Non-critical information, tooltips	Important actions, confirmations, forms

Accessibility Features

Focus Management: Modal dialogs automatically trap focus within the dialog
ESC Key: Modal dialogs can be closed with the Escape key by default
Backdrop Click: Clicking the backdrop closes the modal dialog
ARIA Roles: Automatically applies appropriate ARIA attributes
Screen Readers: Properly announces dialog state to screen readers
Keyboard Navigation: Tab key cycles through focusable elements within the dialog

Styling Dialogs with CSS

Common CSS patterns for styling dialogs:

Example
<style>
  /* Style the dialog element */
  dialog {
    border: none;
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 90vw;
    max-height: 90vh;
  }

  /* Style the backdrop */
  dialog::backdrop {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    animation: fadeIn 0.3s ease;
  }

  /* Animation for backdrop */
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* Make dialog responsive */
  @media (max-width: 768px) {
    dialog {
      max-width: 95vw;
      margin: auto;
    }
  }
</style>

Try it Yourself

Interactive Example

Click the button to see a dialog in action:

Try in Code Playground

Best Practices

Use showModal() for important actions that require user attention
Always provide a clear way to close the dialog (close button or cancel action)
Keep dialog content focused and concise
Use semantic HTML and proper heading structure within dialogs
Test keyboard navigation and screen reader compatibility
Style the backdrop to indicate modal state
Consider adding animations for better user experience
Make dialogs responsive for mobile devices
Use method="dialog" on forms to automatically close the dialog on submit

Related Tags

<details>
Defines additional details
<div>
Defines a section in a document
<section>
Defines a section in a document