Dialogs & Popovers

Modals, confirmation boxes, menus and tooltips used to need hundreds of lines of JavaScript to work accessibly. HTML now provides <dialog> for modal and non-modal dialogs, and the popover attribute for menus and pop-ups — with focus handling, the Esc key and layering built in.

A modal dialog

<button type="button" id="open">Delete file…</button>

<dialog id="confirm" aria-labelledby="confirm-title">
  <h3 id="confirm-title">Delete "report.pdf"?</h3>
  <p>This can't be undone.</p>
  <form method="dialog">
    <button type="submit" value="cancel">Cancel</button>
    <button type="submit" value="delete">Delete</button>
  </form>
</dialog>

<p id="result"></p>

<script>
  const dialog = document.getElementById("confirm");
  document.getElementById("open").addEventListener("click", () => dialog.showModal());
  dialog.addEventListener("close", () => {
    document.getElementById("result").textContent = "You chose: " + dialog.returnValue;
  });
</script>

Result

showModal() opens the dialog as a modal: it appears above everything else, the rest of the page becomes inert (unclickable and hidden from screen readers), focus moves into the dialog, and pressing Esc closes it. When it closes, focus returns to the button that opened it.

A form with method="dialog" closes the dialog instead of submitting anywhere, and the pressed button's value becomes dialog.returnValue.

Opening without JavaScript

Newer browsers support invoker commands, which let a button control a dialog declaratively:

If your browser doesn't support command yet, the buttons do nothing — so for now, keep the small script from the previous example as a fallback for production sites.

Styling the dialog and its backdrop

<style>
  #styled { border: 0; border-radius: 12px; padding: 20px 24px; box-shadow: 0 10px 30px rgba(0,0,0,.25); max-width: 320px; }
  #styled::backdrop { background: rgba(16, 19, 28, .6); backdrop-filter: blur(2px); }
</style>
<button type="button" onclick="document.getElementById('styled').showModal()">Show styled dialog</button>
<dialog id="styled">
  <h3>Subscribe</h3>
  <form method="dialog">
    <p><label for="d-email">Email</label><br><input id="d-email" type="email" required></p>
    <button type="submit">Subscribe</button>
    <button type="submit" formnovalidate>No thanks</button>
  </form>
</dialog>

Result

The ::backdrop pseudo-element styles the overlay behind a modal dialog.

Non-modal dialogs

dialog.show() (instead of showModal()) opens a dialog that doesn't block the page — useful for things like a find-and-replace panel. The open attribute shows a non-modal dialog from the start.

Popovers

For lighter UI — menus, tooltips, pickers, toasts — use the popover attribute. A button with popovertarget toggles it:

Popovers appear in the "top layer" above all other content, close when you click outside or press Esc ("light dismiss"), and only one auto popover is open at a time.

Attribute	Behaviour
`popover` (or `popover="auto"`)	Light-dismiss; opening one closes others
`popover="manual"`	Stays open until explicitly closed — for toasts and notifications
`popover="hint"`	For tooltips; doesn't close other auto popovers
`popovertargetaction`	`toggle` (default), `show` or `hide` on the controlling button

Dialog or popover?

Situation	Use
User must respond before continuing (confirm, important form)	Modal `<dialog>` with `showModal()`
Menus, dropdowns, pickers, tooltips	`popover`
Temporary notification	`popover="manual"`
Simple disclosure inside the page	`<details>` (next lesson)

Accessibility notes

Give dialogs an accessible name with aria-labelledby pointing at their heading.
Always provide a visible way to close them.
Don't overuse modals — they interrupt. Reserve them for decisions that genuinely need attention.

Try it yourself

PreviousAdding JavaScript NextDetails & Summary