HTML dialog versus popover: decide whether the task blocks the page

Use it for a real task

Receipt approval may require a deliberate confirmation with a clear cancel path. That task belongs in a modal dialog opened by application behavior, with focus and close behavior tested. A short definition of a status code can sit in a popover beside its trigger. Choosing by visual appearance alone can leave background controls active during a destructive step or trap a reader in a help panel that should be dismissible.

<button type="button" popovertarget="status-help">Status help</button>
<aside id="status-help" popover="auto">
  <p>Held receipts are excluded from export.</p>
</aside>
<dialog id="approve-dialog" aria-labelledby="approve-title">
  <h2 id="approve-title">Approve receipt R-47?</h2>
  <form method="dialog"><button value="cancel">Cancel</button></form>
</dialog>

What the markup guarantees

The popover trigger works through HTML. The dialog remains closed until code calls its modal opening method; method=dialog closes it and does not submit an approval to a server. A real approval requires a separate authenticated action.

Cost and limits

Native primitives reduce hand-written focus and dismissal code, but a modal workflow still needs testing for focus return, errors, and backend state changes.

Common Mistakes

• Do not treat method=dialog as a server POST.
• Do not use a nonmodal popover for a blocking decision.
• Do not show a dialog merely by setting open and assume it is modal.

Connected lessons

• HTML popover: show dismissible nonmodal help with a button
• HTML details and dialog: distinguish disclosure from a modal task
• HTML receipt review form project: one native flow with clear server boundaries

Continue with HTML manual popover: keep a nonmodal panel open until a deliberate close.

CSS behavior decisions

• CSS anchor positioning: place a hint beside its control
• CSS @starting-style: define an element's entry state