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.
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.
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: