Display content above the page, then dismiss it to continue.
interface QDialogProps extends HTMLAttributes<HTMLDialogElement>
?: boolean = false?: boolean = false?: boolean = false?: QDialogPositionOptions = "default"
?: boolean = $bindable(false)
bind:value with a boolean $state variable to open and close a
dialog. By default the rest of the page stays interactive. Click outside or press Escape to
dismiss it. The collection details in these examples are fictional.Mara Wells · Screenprint · 1987
modal to make the background inert and keep keyboard focus inside the dialog.
Escape and outside clicks still dismiss it.Check the destination and duration before approving.
schedule Awaiting review
persistent prevents dismissal through Escape or outside clicks. Provide explicit
actions to close it. Persistence and modality are independent; this example combines both.Record the handoff with a deliberate choice.
inventory_2 Ready for collection
default, top, right, bottom, or left. Set the position before opening so the entrance animation starts from
the selected edge. This example keeps the background interactive.fullscreen fills the viewport; add modal to block the background.
This form edits a draft. Save applies it, while Cancel or Escape leaves the saved details unchanged.Eastbank Library · One month
bind:this to call show(), hide(), or toggle(). The bound value stays in sync, and onclose runs after each close. Stop propagation on external Show and Toggle buttons
so they do not also count as outside clicks.Dialog closed · Closes: 0
Give every dialog an accessible name with aria-labelledby or aria-label. These examples focus the heading once the opening animation
begins, so keyboard navigation starts at the title. Keep a visible close or cancel action,
and let long content scroll so actions remain reachable on small screens or with larger
text.