Blazor Modal Service

Use Blazor Bootstrap modal service to show quick dialogs to your site for lightboxes, user notifications, or completely custom content.

How it works#

Razor 
<Button Color="ButtonColor.Primary" @onclick="() => ShowModal(ModalType.Primary)">Show Primary Modal</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ShowModal(ModalType.Secondary)">Show Secondary Modal</Button>
<Button Color="ButtonColor.Success" @onclick="() => ShowModal(ModalType.Success)">Show Success Modal</Button>
<Button Color="ButtonColor.Danger" @onclick="() => ShowModal(ModalType.Danger)">Show Danger Modal</Button>
<Button Color="ButtonColor.Warning" @onclick="() => ShowModal(ModalType.Warning)">Show Warning Modal</Button>
<Button Color="ButtonColor.Info" @onclick="() => ShowModal(ModalType.Info)">Show Info Modal</Button>
<Button Color="ButtonColor.Light" @onclick="() => ShowModal(ModalType.Light)">Show Light Modal</Button>
<Button Color="ButtonColor.Dark" @onclick="() => ShowModal(ModalType.Dark)">Show Dark Modal</Button>

@code {
    [Inject] ModalService ModalService { get; set; } = default!;

    private async Task ShowModal(ModalType modalType)
    {
        var modalOption = new ModalOption
                          {
                              Title = "Modal title",
                              Message = "Modal body text goes here.",
                              Type = modalType,
                          };

        await ModalService.ShowAsync(modalOption);
    }
}

Vertically Centered#

Razor 
<Button Color="ButtonColor.Primary" @onclick="() => ShowModal(ModalType.Primary)">Show Primary Modal</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ShowModal(ModalType.Secondary)">Show Secondary Modal</Button>
<Button Color="ButtonColor.Success" @onclick="() => ShowModal(ModalType.Success)">Show Success Modal</Button>
<Button Color="ButtonColor.Danger" @onclick="() => ShowModal(ModalType.Danger)">Show Danger Modal</Button>
<Button Color="ButtonColor.Warning" @onclick="() => ShowModal(ModalType.Warning)">Show Warning Modal</Button>
<Button Color="ButtonColor.Info" @onclick="() => ShowModal(ModalType.Info)">Show Info Modal</Button>
<Button Color="ButtonColor.Light" @onclick="() => ShowModal(ModalType.Light)">Show Light Modal</Button>
<Button Color="ButtonColor.Dark" @onclick="() => ShowModal(ModalType.Dark)">Show Dark Modal</Button>

@code {
    [Inject] ModalService ModalService { get; set; } = default!;

    private async Task ShowModal(ModalType modalType)
    {
        var modalOption = new ModalOption
                          {
                              Title = "Modal title",
                              Message = "Modal body text goes here.",
                              Type = modalType,
                              IsVerticallyCentered = true
                          };

        await ModalService.ShowAsync(modalOption);
    }
}

Size#

Razor 
<Button Color="ButtonColor.Primary" @onclick="() => ShowModal(ModalSize.Regular)">Show Regular Modal</Button>
<Button Color="ButtonColor.Secondary" @onclick="() => ShowModal(ModalSize.Small)">Show Small Modal</Button>
<Button Color="ButtonColor.Success" @onclick="() => ShowModal(ModalSize.Large)">Show Large Modal</Button>
<Button Color="ButtonColor.Danger" @onclick="() => ShowModal(ModalSize.ExtraLarge)">Show ExtraLarge Modal</Button>

@code {
    [Inject] ModalService ModalService { get; set; } = default!;

    private async Task ShowModal(ModalSize modalSize)
    {
        var modalOption = new ModalOption
                          {
                              Title = "Modal title",
                              Message = "Modal body text goes here.",
                              Size = modalSize
                          };

        await ModalService.ShowAsync(modalOption);
    }
}

Change footer button color and text#

Razor 
<Button Color="ButtonColor.Primary" @onclick="ShowModal">Show Modal</Button>

@code {
    [Inject] ModalService ModalService { get; set; } = default!;

    private async Task ShowModal()
    {
        var modalOption = new ModalOption
                          {
                              Title = "Modal title",
                              Message = "Modal body text goes here.",
                              FooterButtonColor = ButtonColor.Primary,
                              FooterButtonText = "Got it!"
                          };

        await ModalService.ShowAsync(modalOption);
    }
}
Razor 
<Button Color="ButtonColor.Primary" @onclick="ShowModal">Show Modal</Button>

@code {
    [Inject] ModalService ModalService { get; set; } = default!;

    private async Task ShowModal()
    {
        var modalOption = new ModalOption
                          {
                              Title = "Modal title",
                              Message = "Modal body text goes here.",
                              ShowFooterButton = false
                          };

        await ModalService.ShowAsync(modalOption);
    }
}

Callback#

Razor 
<Button Color="ButtonColor.Primary" @onclick="() => ShowModal(ModalSize.Regular)">Show Modal</Button>

<div class="mt-3">
    @callbackActionMessage
</div>

@code {

    [Inject] ModalService ModalService { get; set; } = default!;

    private string callbackActionMessage = "";

    private async Task ShowModal(ModalSize modalSize)
    {
        var modalOption = new ModalOption
                          {
                              Title = "Modal title",
                              Message = "Modal body text goes here.",
                              Size = modalSize
                          };

        await ModalService.ShowAsync(modalOption, OnModalClose);
    }

    private void OnModalClose()
    {
        // TODO: Do operations required after modal close.
        callbackActionMessage = $"Modal closed at {DateTime.Now}";

        StateHasChanged();
    }
}

How to setup#

1. Add the Modal component in MainLayout.razor page as shown below.
Razor 
@inherits LayoutComponentBase

...

... MainLayour.razor code goes here ...

...

<Modal IsServiceModal="true" />
2. Inject ModalService, then call the ShowAsync(...) method as shown below. ShowAsync method accepts ModalOption object as a parameter.
Razor 
@code {
    [Inject] ModalService ModalService { get; set; } = default!;

    private async Task SaveEmployeeAsync()
    {
        try
        {
            // call the service/api to save the employee details

            var modalOption = new ModalOption
                              {
                                  Title = "Save Employee",
                                  Message = "Employee details saved.",
                                  Type = ModalType.Success
                              };

            await ModalService.ShowAsync(modalOption);
        }
        catch(Exception ex)
        {
            // handle exception

            var modalOption = new ModalOption
                              {
                                  Title = "Save Employee",
                                  Message = $"Error: {ex.Message}.",
                                  Type = ModalType.Danger
                              };

            await ModalService.ShowAsync(modalOption);
        }
    }
}
If you like Blazor Bootstrap, give it a star on GitHub!
Blazor Bootstrap Blazor Bootstrap
Links
Guides
Community