Blazor Window Modal - Telerik UI for Blazor

New to Telerik UI for Blazor? Start a free 30-day trial

Updated on Dec 13, 2024

The Window for Blazor can be modal so that the user is unable to interact with the rest of the page until it closes.

To make a modal window, set its Modal property to true.

It is possible for users to close a modal Window by clicking on the modal background around it. To allow this behavior, set CloseOnOverlayClick to true.

Open and close a modal Window

<TelerikWindow Modal="true"
               @bind-Visible="@isModalVisible"
               CloseOnOverlayClick="true">
    <WindowTitle>
        Window Title
    </WindowTitle>
    <WindowContent>
        I am modal, so the page content behind me is not accessible to the user.
    </WindowContent>
    <WindowActions>
        <WindowAction Name="Close" />
    </WindowActions>
</TelerikWindow>

<TelerikButton OnClick="@( _ => isModalVisible = true )">Open the window</TelerikButton>

@code{
    bool isModalVisible { get; set; } = true;
}

Modal Window

See Also