Show and Hide Overlay

Modeless (Non-Modal) Overlay

Show and Hide Overlay with backdrop and focus trap

Content Scrolling

Positioning and Sizing With Inline Styles

Default position and size: constrained to fit in the viewport, centering the content.

To customize, applying inline styles to the overlay in the following steps:

  1. Customize constraints with left, top, right, bottom, code in any combination. Default values: 0 or small theme-defined offsets from the viewport.

    Note: avoid setting 0 or auto manually, leave unset to use a theme-defined default viewport offset instead.

    In addition, max-width and max-height are also available, unset by default.

  2. Align or stretch the content of the constrained overlay using align-items and justify-content. Default values are center.