Close Blazor Dialog Component When Clicking Outside of Its Region

28 Jun 20221 minute to read

By default, dialog can be closed by pressing Esc key and clicking the close icon at the right of dialog header. It can also be closed by clicking outside of the dialog using Visible property. Set the CloseOnEscape property value to false to prevent closing of the dialog when pressing Esc key.

In the following code, dialog is closed when clicking outside the dialog area using Visible property.

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons

<SfButton @onclick="@OpenDialog">Open Dialog</SfButton>

<div id="target">
    <SfDialog Target="#target" Width="300px" IsModal="true" ShowCloseIcon="true" CloseOnEscape="false" @bind-Visible="@IsVisible">
        <DialogEvents OnOverlayClick="@OverlayClick"></DialogEvents>
        <DialogTemplates>
            <Header> Delete Multiple Items</Header>
            <Content> Are you sure you want to permanently delete all of these items? </Content>
        </DialogTemplates>
        <DialogButtons>
            <DialogButton Content="Yes" IsPrimary="true" OnClick="@CloseDialog" />
            <DialogButton Content="No" OnClick="@CloseDialog" />
        </DialogButtons>
    </SfDialog>
</div>

<style>
    #target {
        min-height: 450px;
        height: 100%;
    }
</style>

@code {
    private bool IsVisible { get; set; } = true;

    private void OpenDialog()
    {
        this.IsVisible = true;
    }

    private void OverlayClick(MouseEventArgs args)
    {
        this.IsVisible = false;
    }

    private void CloseDialog()
    {
        this.IsVisible = false;
    }
}