Skip to content

Backdrop

A full-screen semi-transparent overlay with transparent/blur variants and body scroll locking; the node is automatically unmounted when open=false, leaving no orphan DOM.

Basic usage

Basic usage

Open backdrop

Click anywhere on the backdrop to close it (listen for oas-click).

Transparent & blur

Transparent & blur

Transparent + blurFully transparent

No scroll lock

No scroll lock

Open (scrollable)

lock-scroll defaults to true; set it to false to keep the body scrollable.

API

Attributes

AttributeDescriptionTypeDefault
blurBlur the background
lock-scrollLock body scroll while openstringtrue
openWhether shownboolean
transparentTransparent overlay (no background)

Events

EventDescription
oas-clickBackdrop clicked, detail.originalEvent is the original click event
  • No focus trap of its own (handled by the overlying dialog); Esc does not auto-close (decided by the outer dialog).
  • The node is removed from the DOM when open=false, leaving no orphan DOM; when multiple backdrops coexist, scroll is restored only when the last one closes.