v133 · html

Unsaved form guard

The right closedby value depends on the stakes. A destructive confirmation needs closedby="none" so an accidental backdrop click can't silently discard work. An informational notification can use closedby="any" so it dismisses without requiring a click on a button.

Feature detection: checking…
closedby="none" — destructive confirmation
The "Discard changes?" dialog uses closedby="none". Clicking outside or pressing Escape does nothing — the user must explicitly choose "Discard" or "Keep editing". Prevents the common UX bug of accidentally losing work.
closedby="any" — informational
The "Saved!" confirmation uses closedby="any". It dismisses on backdrop click, Escape, or the ✕ button. Low-stakes — the user is free to acknowledge it any way they like.
Document editor ● unsaved changes
Discard changes? closedby="none"
You have unsaved changes. Discarding will permanently delete them. This action cannot be undone.

Try clicking outside or pressing Escape — nothing happens. You must choose.
Saved ✓ closedby="any"
Document saved successfully.

Try clicking outside or pressing Escape — the dialog dismisses immediately.
Document info closedby="any"
Loading…

Event log:

Interact with the editor and dialogs to see events.

see also

references