Show and Hide Overlay

Defining Content with Polymer Templates

Modeless (Non-Modal) Overlay

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.

Opening and Closing Animations

Styling the Template Content from the Parent Component Scope

If the overlay is used inside a component, use the component styles for styling the overlay content.

Styling the Template Content from the Global Scope

If the overlay is used in the global scope, then global styles can target the overlay content.