Français

<dialog>

Open a modal window, with a built-in focus trap

— 1 min read

  • HTML
  • accessibility
  • semantics
  • interactions

<dialog> — The modal window

The <dialog> element represents a dialog box. Opened with showModal(), it traps focus inside and disables the rest of the page. The open attribute makes it non-modal.

When to use it

You want to display a confirmation, a login form, an alert message, or any interaction that requires the user's exclusive attention before proceeding.

What you gain

Accessibility: focus trapping, backdrop, Escape key dismissal, and focus restoration are all native. No need to reinvent any of that with ARIA.

Code example

<dialog id="confirm">
  <h2>Delete this item?</h2>
  <p>This action cannot be undone.</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="confirm">Delete</button>
  </form>
</dialog>
 
<button type="button" onclick="confirm.showModal()">
  Delete item
</button>

Further reading