Overlay

An overlay covers the viewport.

Covering the viewport is useful if you want to present a modal that should block interaction with the content behind it. It is also useful in situations where you want to visibly block the main content, such as a login form.

Show Overlay

Only one overlay is allowed at a time. An overlay will disable the document's scrollbars when it is created and will re-enable scrollbars when it is destroyed, so don't try to hide an overlay by setting display: none — that won't work as intended! Instead, use *ngIf to control the visibility of an overlay.

Overlay Example

This is a card inside an overlay.

This card is horizontally and vertically centered using pure CSS — no scripting or crazy hacks required.

<ma-overlay [opaque]='overlayIsOpaque'>
  <ma-card title='This is a card inside…'>
    …
  </ma-card>
</ma-overlay>

The [opaque] property controls whether the overlay is opaque or slightly transparent. Try changing that property:

Close Overlay