Blazor Dialog - An Interactive Modal Dialog Component

Overview

The Blazor Dialog is a user interface (UI) component that displays critical information, errors, warnings, and questions to users, as well as confirms decisions and collects input from the users. The component has a rich set of built-in features such as action buttons, positioning, animation, dragging, resizing, templating, and more with mobile dialog support.

Modal dialogs (modal window)

The two types of dialogs are modal and non-modal (modeless), based on user interactions:

• Modal dialogs force users to interact with them before continuing. They are used to show important information and non-continuous process information (for example, a sign-up or login form).
• Non-modal dialogs allow users to interact outside the dialog box even if it is in an active state, which is suitable for frequent, nonblocking dialogs (for example, find-and-replace dialogs).

• Modal dialogs example
• Modal dialogs documentation

Localization

The localization library allows you to localize the default text content. In the Dialog component, the close button’s tooltip text alone will be localized based on the specified culture.

• Localization documentation

Animation

A variety of smooth, built-in animations are available to configure the opening and closing of modal dialogs. The Blazor Dialog is animated based on CSS3 animation from the Animation library.

Resizable

The Blazor Dialog window can be resized by dragging the edges or borders of the Dialog within the target container using its handle (grip) or hovering over it.

Blazor modal dialog example

Easily get started with the Blazor Dialog using a few simple lines of C# code as demonstrated below. Also explore our Blazor modal dialog example that shows you how to render and configure the Blazor Dialog.

@using Syncfusion.Blazor.Buttons

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

<SfDialog Width="250px" IsModal="true" @bind-Visible="@IsVisible">
    <DialogEvents OnOverlayClick="@OnOverlayclick">
    </DialogEvents>
    <DialogTemplates>
        <Content> This is a modal dialog </Content>
    </DialogTemplates>
</SfDialog>

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

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

    private void OnOverlayclick(MouseEventArgs arg)
    {
        this.IsVisible = false;
    }
}