HTML <dialog> Tag

What You’ll Learn

By the end of this tutorial, you’ll build native modal and non-modal dialogs with <dialog>—no custom overlay divs required.

What Is the <dialog> Tag?

The dialog element (<dialog>) represents a dialog box or other interactive component. It can be modal (blocks the page with a backdrop) or non-modal (floats without blocking). By default, a dialog is hidden until opened.

Common uses include confirmation prompts, sign-up forms, cookie notices, image lightboxes, settings panels, and any UI that needs a focused overlay.

📝 Syntax

Place dialog content inside opening and closing dialog tags:

<dialog id="myDialog">
  <p>Dialog message here.</p>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>

Syntax Rules

• Dialogs are hidden by default until opened with JavaScript or the open attribute.
• Use showModal() for blocking modals with backdrop and focus trap.
• Use form method="dialog" so submit buttons close the dialog automatically.
• Style the overlay with the ::backdrop pseudo-element on modal dialogs.

⚖️ Modal vs Non-Modal

How you open a dialog determines its behavior:

Examples Gallery

open attribute, showModal(), form dialogs, and non-modal panels with copy-ready code and live previews.

<dialog open>
  <p>This dialog is open by default.</p>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>

<button type="button" id="openBtn">Open modal</button>

<dialog id="welcomeDialog">
  <p>Please confirm you want to continue.</p>
  <form method="dialog">
    <button value="confirmed">Confirm</button>
  </form>
</dialog>

<script>
  const dialog = document.getElementById('welcomeDialog');
  document.getElementById('openBtn').addEventListener('click', () => {
    dialog.showModal();
  });
</script>

<dialog id="signupDialog">
  <form method="dialog">
    <label>Name <input type="text" name="name" required></label>
    <button type="submit" value="cancel">Cancel</button>
    <button type="submit" value="save">Save</button>
  </form>
</dialog>

<button type="button" id="showBtn">Show panel</button>

<dialog id="infoPanel">
  <p>Non-modal helper panel.</p>
  <form method="dialog"><button>Dismiss</button></form>
</dialog>

<script>
  document.getElementById('showBtn').addEventListener('click', () => {
    document.getElementById('infoPanel').show();
  });
</script>

♿ Accessibility

Native dialogs include helpful built-in behavior:

• Use showModal() for blocking dialogs — provides focus management and Escape to close.
• Label the purpose clearly — use headings and descriptive button text.
• Close with form method="dialog" — works without custom click handlers.
• Return focus after close — browsers restore focus to the triggering element.

💡 Best Practices