Blazor Modal

Use Blazor Bootstrap modal component to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Examples#

Dynamic component as modal#

Render different components dynamically within the modal without iterating through possible types or using conditional logic.
If dynamically-rendered components have component parameters, pass them as an IDictionary. The string is the parameter's name, and the object is the parameter's value.
Razor
<Modal @ref="modal" />

<Button Color="ButtonColor.Primary" @onclick="ShowEmployeeComponent">Show Employee Component</Button>

@code {
    private Modal modal = default!;

    private async Task ShowEmployeeComponent()
    {
        var parameters = new Dictionary<string, object>();
        parameters.Add("EmployeeId", 321);
        await modal.ShowAsync<EmployeeDemoComponent1>(title: "Employee Details", parameters: parameters);
    }
}
EmployeeDemoComponent1.razor
Razor
<div class="row">
    <div class="col-5 col-md-3 text-end">Employee Id :</div>
    <div class="col-7 col-md-9">@EmployeeId</div>
</div>
<div class="row">
    <div class="col-5 col-md-3 text-end">First Name :</div>
    <div class="col-7 col-md-9">@employee?.FirstName</div>
</div>
<div class="row">
    <div class="col-5 col-md-3 text-end">Last Name :</div>
    <div class="col-7 col-md-9">@employee?.LastName</div>
</div>

@code {
    private Employee? employee;

    [Parameter] public int EmployeeId { get; set; }

    protected override void OnInitialized()
    {
        // get employee with {EmployeeId} from DB

        employee = new Employee { FirstName = "Vikram", LastName = "Reddy" };

        base.OnInitialized();
    }
}

Pass event callbacks to a dynamic component#

Event callbacks (EventCallback) can be passed in its parameter dictionary.
In the following parent component example, the ShowDTMessage method assigns a string with the current time to message, and the value of message is rendered. The parent component passes the callback method, ShowDTMessage in the parameter dictionary:
  • The string key is the callback method's name, OnClickCallback.
  • The object value is created by EventCallbackFactory.Create for the parent callback method, ShowDTMessage.
Razor
<Modal @ref="modal" />

<Button Color="ButtonColor.Primary" @onclick="ShowEmployeeComponent">Show Employee Component</Button>

<div class="mt-3 bg-success text-white bg-opacity-75">
    @message
</div>

@code {
    private Modal modal = default!;
    private string? message;

    private async Task ShowEmployeeComponent()
    {
        var parameters = new Dictionary<string, object>();
        parameters.Add("EmployeeId", 322);
        parameters.Add("OnclickCallback", EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage));
        await modal.ShowAsync<EmployeeDemoComponent2>(title: "Employee Details", parameters: parameters);
    }

    private void ShowDTMessage(MouseEventArgs e) => message = $"The current DT is: {DateTime.Now}.";
}
EmployeeDemoComponent2.razor
Razor
<div class="row">
    <div class="col-5 col-md-3 text-end">Employee Id :</div>
    <div class="col-7 col-md-9">@EmployeeId</div>
</div>
<div class="row">
    <div class="col-5 col-md-3 text-end">First Name :</div>
    <div class="col-7 col-md-9">@employee?.FirstName</div>
</div>
<div class="row">
    <div class="col-5 col-md-3 text-end">Last Name :</div>
    <div class="col-7 col-md-9">@employee?.LastName</div>
</div>

<Button class="mt-3" Color="ButtonColor.Success" Type="ButtonType.Button" @onclick="OnClickCallback">
    Trigger a Parent component method
</Button>

@code {
    private Employee? employee;

    [Parameter] public int EmployeeId { get; set; }

    [Parameter] public EventCallback<MouseEventArgs> OnClickCallback { get; set; }

    protected override void OnInitialized()
    {
        // get employee with {EmployeeId} from DB

        employee = new Employee { FirstName = "Sagar", LastName = "Reddy" };

        base.OnInitialized();
    }
}

Static backdrop#

When UseStaticBackdrop is set to true, the modal will not close when clicking outside it. Click the button below to try it.

Scrolling long content#

When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
You can also create a scrollable modal that allows scroll the modal body by adding IsScrollable="true".

Vertically centered#

Add IsVerticallyCentered="true" to vertically center the modal.

Optional sizes#

Modals have three optional sizes. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.

Fullscreen Modal#

Events#

Blazor Bootstrap modal class exposes a few events for hooking into modal functionality.