Usage
<MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="OpenOverlay">Show Overlay</MudButton> <MudOverlay @bind-Visible="isVisible" DarkBackground="true" AutoClose="true"/>
@code { private bool isVisible; public void OpenOverlay() { isVisible = true; StateHasChanged(); } }
Absolute
The overlay can be contained inside its parent using the Absolute property and css Style="position: relative;".
<MudPaper Class="pa-8" Style="height: 300px; position: relative;"> <MudButton Variant="Variant.Filled" Color="Color.Secondary" OnClick="@(e => ToggleOverlay(true))">Show Overlay</MudButton> <MudOverlay Visible="isVisible" DarkBackground="true" Absolute="true"> <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="@(e => ToggleOverlay(false))">Hide Overlay</MudButton> </MudOverlay> </MudPaper>
@code { private bool isVisible; public void ToggleOverlay(bool value) { isVisible = value; } }
Z Index
With the ZIndex property you can control the stack order of the component.
<MudButton Variant="Variant.Filled" Color="Color.Tertiary" OnClick="OpenOverlay">Show Overlay</MudButton> <MudOverlay @bind-Visible="isVisible" DarkBackground="true" ZIndex="9999" AutoClose="true"/>
@code { private bool isVisible; public void OpenOverlay() { isVisible = true; StateHasChanged(); } }