| description | Use when building any surface that lives in the browser top layer : modal confirmations, cookie banners, dropdown menus, command palettes, tooltips, date pickers, comboboxes, settings panels, off-canvas drawers, side-sheets. Use when deciding between `<dialog>` + `showModal()` (interrupts user, modal, has backdrop) versus the Popover API (`popover="auto" | "manual" | "hint"`, always non-modal, ships light-dismiss). Use when positioning a surface relative to a trigger via CSS Anchor Positioning (`anchor-name`, `position-anchor`, `anchor()`, `position-area`, `position-try-fallbacks`) instead of `getBoundingClientRect` scroll/resize math. Use when fixing the "open animation does not play" bug or the "exit animation cuts off" bug : both require the `@starting-style` + `transition-behavior: allow-discrete` + `overlay` recipe. Prevents the six dominant top-layer failures : adding `tabindex` to `<dialog>` (forbidden by spec, breaks focus model); combining `popover` attribute with `dialog.showModal()` on the same element (undefined behavior, popovers are non-modal by definition); rolling custom click-outside JS for a popover that already ships light- dismiss; missing `@starting-style` so the entry animation never starts; missing `display ... allow-discrete` (and `overlay ... allow-discrete` for top-layer elements) in the transition shorthand so the exit animation cuts off the instant `.hidePopover()` or `.close()` runs; using anchor positioning without an `@supports (anchor-name: --x)` gate on browsers older than 2025-2026. Covers `<dialog>` (Baseline since March 2022) with `.showModal()` (top-layer + implicit inert + Escape-to-close + `::backdrop`), `.show()` (non-modal), `.close(returnValue?)` plus the `closedby` attribute (`any | closerequest | none`) and the surprising defaults (`showModal` -> `closerequest`, `show` and `<dialog open>` -> `none`), the manual focus-restoration pattern (capture `document.activeElement` before open, restore on `close` event), Popover API (Baseline 2025) with the three popover states, `popovertarget` + `popovertargetaction` declarative triggers, `:popover-open` pseudo-class, the popover stack / hide-until algorithm, automatic focus restoration on light-dismiss, CSS Anchor Positioning (`anchor-name`, `position-anchor`, `anchor(<side>)`, `position-area` 3x3 grid, `position-try-fallbacks` with `flip-block / flip-inline / flip-start` and named `@position-try` options) including the implicit anchor relationship between a `popovertarget` button and its popover, and the combined enter-and-exit animation recipe (`opacity` + `display allow-discrete` + `overlay allow-discrete` + `@starting-style` declared AFTER the open-state rule). Keywords: dialog, dialog showModal, dialog show, dialog close, closedby, closedby any, closedby closerequest, closedby none, ::backdrop, autofocus dialog, returnValue, form method dialog, Popover API, popover, popover auto, popover manual, popover hint, popovertarget, popovertargetaction, showPopover, hidePopover, togglePopover, ToggleEvent, beforetoggle, :popover-open, CSS anchor positioning, anchor-name, position-anchor, anchor function, position-area, position-try-fallbacks, flip-block, flip-inline, flip-start, @position-try, position-visibility, anchor-size, anchor-center, @starting-style, transition-behavior, allow-discrete, overlay, top layer, top-layer stacking, popover stack, light dismiss, popover not closing, popover not opening, dialog not animating, dialog focus broken, tooltip wrong position, anchor positioning broken, anchor positioning not supported, dialog animation snaps, popover stays after click outside, popover focus stuck, animation cut off, exit animation cut off, how to make a modal in HTML, how to make a popover, popover API tutorial, anchor positioning CSS, animated dialog open close, accessible tooltip, how to light dismiss popover, how to position tooltip, how to animate dialog entry, how to animate popover.
|
