Skip to content

Latest commit

 

History

History
45 lines (35 loc) · 1.21 KB

modal.md

File metadata and controls

45 lines (35 loc) · 1.21 KB
title page_title description slug tags published position
Modal
Window - Modal
How to make a modal Window for Blazor.
components/window/modal
telerik,blazor,window,modal
true
5

Modal Window

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.

caption 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;
}

See Also