Modal

Static modal example

<BsModal Class="position-static d-block" Fade="false">
    <BsModalDialog>
        <BsModalContent>
            <BsModalHeader>
                <BsModalTitle>Modal title</BsModalTitle>
                <BsModalCloseButton />
            </BsModalHeader>
            <BsModalBody>
                Modal body text goes here.
            </BsModalBody>
            <BsModalFooter>
                <BsButton Variant="BsButtonVariant.Secondary" Dismiss="BsButtonDismiss.Modal">Close</BsButton>
                <BsButton Variant="BsButtonVariant.Primary">Save Changes</BsButton>
            </BsModalFooter>
        </BsModalContent>
    </BsModalDialog>
</BsModal>

Shorthands

Shorthands are a quick way to create a modal with a title, body, and buttons.

Modal shorthand

<BsModalShorthand Class="position-static d-block" Title="Shortand modal title" Fade="false">
    Shortand Modal
</BsModalShorthand>

Modal dialog shorthand

<BsModal Class="position-static d-block" Fade="false">
    <BsModalDialogShorthand Title="Shorthand modal dialog title">
        Shortand Modal Dialog
    </BsModalDialogShorthand>
</BsModal>

Live demo

Events detected by Blazor interactivity:

@using System.Text
<BsButton Variant="BsButtonVariant.Primary" Toggle="BsButtonToggle.Modal" Target="#exampleModal">Launch demo modal</BsButton>
<BsModal Id="exampleModal"
         aria-labelledby="exampleModalLabel"
         OnShow="@(() => _sb1.AppendLine("Show"))"
         OnShown="@(() => _sb1.AppendLine("Shown"))"
         OnHide="@(() => _sb1.AppendLine("Hide"))"
         OnHidePrevented="@(() => _sb1.AppendLine("HidePrevented"))"
         OnHidden="@(() => _sb1.AppendLine("Hidden"))">
    <BsModalDialog>
        <BsModalContent>
            <BsModalHeader>
                 <BsModalTitle id="exampleModalLabel">Modal title</BsModalTitle>
                 <BsModalCloseButton />
            </BsModalHeader>
            <BsModalBody>
                Woohoo, you're reading this text in a modal!
            </BsModalBody>
            <BsModalFooter>
                <BsButton Variant="BsButtonVariant.Secondary" Dismiss="BsButtonDismiss.Modal">Close</BsButton>
                <BsButton Variant="BsButtonVariant.Primary">Save Changes</BsButton>
            </BsModalFooter>
        </BsModalContent>
    </BsModalDialog>
</BsModal>
<div class="mt-4">Events detected by Blazor interactivity:</div>
<div style="height: 50px; overflow-y: auto; border: 1px solid black">@_sb1</div>

@code {
    private StringBuilder _sb1 = new();
}

Static backdrop

Events detected by Blazor interactivity:

@using System.Text
<BsButton Variant="BsButtonVariant.Primary"
          Toggle="BsButtonToggle.Modal"
          Target="#staticBackdrop">Launch static backdrop modal</BsButton>
<BsModalShorthand Id="staticBackdrop"
                  Backdrop="BsModalBackdrop.Static"
                  Keyboard="false"
                  Title="Modal title"
                  OnShow="@(() => _sb2.AppendLine("Show"))"
                  OnShown="@(() => _sb2.AppendLine("Shown"))"
                  OnHide="@(() => _sb2.AppendLine("Hide"))"
                  OnHidePrevented="@(() => _sb2.AppendLine("HidePrevented"))"
                  OnHidden="@(() => _sb2.AppendLine("Hidden"))"
                  ShowPrimaryButton
                  PrimaryButtonText="Understood">I will not close if you click outside me. Don't even try to press escape key.</BsModalShorthand>
<div class="mt-4">Events detected by Blazor interactivity:</div>
<div style="height: 50px; overflow-y: auto; border: 1px solid black">@_sb2</div>
@code {
    private StringBuilder _sb2 = new();
}

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 scrolling the modal body by adding Scrollable parameter

<BsButton Variant="BsButtonVariant.Primary" Toggle="BsButtonToggle.Modal" Target="#scrollableModal">Launch demo modal</BsButton>
<BsModalShorthand Id="scrollableModal" Scrollable ShowPrimaryButton PrimaryButtonText="Save changes">
    <p style="min-height: 1500px">This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.</p>
</BsModalShorthand>

Vertically centered

<BsButton Variant="BsButtonVariant.Primary" Toggle="BsButtonToggle.Modal" Target="#verticallyCentered">Vertically centered modal</BsButton>
<BsModalShorthand Id="verticallyCentered" 
                  Title="Modal title" 
                  ShowPrimaryButton
                  PrimaryButtonText="Save changes"
                  Centered>
    This is a vertically centered modal.
</BsModalShorthand>

<BsButton Variant="BsButtonVariant.Primary" Toggle="BsButtonToggle.Modal" Target="#verticallyCenteredScrollable">
    Vertically centered scrollable modal
</BsButton>
<BsModalShorthand Id="verticallyCenteredScrollable"
                  Title="Modal title"
                  Scrollable
                  ShowPrimaryButton
                  PrimaryButtonText="Save changes"
                  Centered>
    <p>This is some placeholder content to show a vertically centered modal. We've added some extra copy here to show how vertically centering the modal works when combined with scrollable modals. We also use some repeated line breaks to quickly extend the height of the content, thereby triggering the scrolling. When content becomes longer than the prefedined max-height of modal, content will be cropped and scrollable within the modal.</p>
    <br><br><br><br><br><br><br><br><br><br>
    <p>Just like that.</p>
</BsModalShorthand>

Toggle between modals

<BsButton Variant="BsButtonVariant.Primary" Toggle="BsButtonToggle.Modal" Target="#exampleModalToggle">Open first modal</BsButton>
<BsModalShorthand Id="exampleModalToggle"
                  Title="Modal 1"
                  Centered>
    <ChildContent>
        Show a second modal and hide this one with the button below.
    </ChildContent>
    <CustomFooter>
        <BsButton Variant="BsButtonVariant.Primary" Dismiss="BsButtonDismiss.Modal"
                  Target="#exampleModalToggle2"
                  Toggle="BsButtonToggle.Modal">Open second modal</BsButton>
    </CustomFooter>
</BsModalShorthand>
<BsModalShorthand Id="exampleModalToggle2" 
                  Title="Modal 2"
                  Centered>
    <ChildContent>
        Hide this modal and show the first with the button below.
    </ChildContent>
    <CustomFooter>
        <BsButton Variant="BsButtonVariant.Primary" Dismiss="BsButtonDismiss.Modal"
                  Target="#exampleModalToggle"
                  Toggle="BsButtonToggle.Modal">Back to first</BsButton>
    </CustomFooter>
</BsModalShorthand>

Remove animation

<BsButton Variant="BsButtonVariant.Primary" Toggle="BsButtonToggle.Modal" Target="#noAnimation">No animation</BsButton>
<BsModalShorthand Id="noAnimation" Centered Fade="false">
        No animation
</BsModalShorthand>

Optional sizes

<BsButton Variant="BsButtonVariant.Primary" Toggle="BsButtonToggle.Modal" Target="#extraLargeModal">Extra large modal</BsButton>
<BsButton Variant="BsButtonVariant.Primary" Toggle="BsButtonToggle.Modal" Target="#largeModal">Large modal</BsButton>
<BsButton Variant="BsButtonVariant.Primary" Toggle="BsButtonToggle.Modal" Target="#smallModal">Small modal</BsButton>
<BsModalShorthand Id="extraLargeModal" Title="Extra large modal" Size="BsModalSize.ExtraLarge">...</BsModalShorthand>
<BsModalShorthand Id="largeModal" Size="BsModalSize.Large" Title="Large modal">...</BsModalShorthand>
<BsModalShorthand Id="smallModal" Size="BsModalSize.Small" Title="Small modal">...</BsModalShorthand>

Fullscreen Modal

<BsButton Variant="BsButtonVariant.Primary" Toggle="BsButtonToggle.Modal" Target="#exampleModalFullscreen">Full screen</BsButton>
<BsButton Variant="BsButtonVariant.Primary" Toggle="BsButtonToggle.Modal" Target="#exampleModalFullscreenSm">Full screen below sm</BsButton>
<BsButton Variant="BsButtonVariant.Primary" Toggle="BsButtonToggle.Modal" Target="#exampleModalFullscreenMd">Full screen below md</BsButton>
<BsButton Variant="BsButtonVariant.Primary" Toggle="BsButtonToggle.Modal" Target="#exampleModalFullscreenLg">Full screen below lg</BsButton>
<BsButton Variant="BsButtonVariant.Primary" Toggle="BsButtonToggle.Modal" Target="#exampleModalFullscreenXl">Full screen below xl</BsButton>
<BsButton Variant="BsButtonVariant.Primary" Toggle="BsButtonToggle.Modal" Target="#exampleModalFullscreenXxl">Full screen below xxl</BsButton>
<BsModalShorthand Id="exampleModalFullscreen"
                  Fullscreen="BsModalFullscreen.Always"
                  Title="Full screen modal">...</BsModalShorthand>
<BsModalShorthand Id="exampleModalFullscreenSm"
                  Fullscreen="BsModalFullscreen.BelowSmall"
                  Title="Full screen modal below sm">...</BsModalShorthand>
<BsModalShorthand Id="exampleModalFullscreenMd"
                  Fullscreen="BsModalFullscreen.BelowMedium"
                  Title="Full screen modal below md">...</BsModalShorthand>
<BsModalShorthand Id="exampleModalFullscreenLg"
                  Fullscreen="BsModalFullscreen.BelowLarge"
                  Title="Full screen modal below lg">...</BsModalShorthand>
<BsModalShorthand Id="exampleModalFullscreenXl"
                  Fullscreen="BsModalFullscreen.BelowExtraLarge"
                  Title="Full screen modal below xl">...</BsModalShorthand>
<BsModalShorthand Id="exampleModalFullscreenXxl"
                  Fullscreen="BsModalFullscreen.BelowExtraExtraLarge"
                  Title="Full screen modal below xxl">...</BsModalShorthand>

Methods

Extras

Non native bootstrap features

IModalService

The IModalService is a service that allows you to open modals from anywhere in your application.

To use the IModalService, you need to add the BsModalServiceContainer component to your application MainLayout.

<BsModalServiceContainer/>

@inject IModalService ModalService
<BsButton OnClick="ShowModalAsync" Variant="BsButtonVariant.Primary">Show Modal</BsButton>
@code {
    private async void ShowModalAsync()
    {
        var modalReference = await ModalService.ShowDialogAsync<ModalServiceDialogExample>(
            parameters: p => p.Add(c => c.Name, "Name Parameter")
                              .Add(c => c.SecondParameter, "X")
        );
        await modalReference.WaitClosedAsync();
        Console.WriteLine($"Modal closed");
    }
}

ModalServiceDialogExample.razor

<BsModalDialogShorthand Title="Modal Service with parameters">
    <div>
        Hi, @Name
    </div>
    <div>
        Second Parameter: @SecondParameter
    </div>
    <BsButton Variant="BsButtonVariant.Secondary" OnClick="() => ModalReference.CloseAsync()">Close myself</BsButton>
</BsModalDialogShorthand>
@code{
    [CascadingParameter]
    public required IModalReference ModalReference { get; set; }
    [Parameter]
    public string Name { get; set; } = "";
    [Parameter]
    public string SecondParameter { get; set; } = "";
}

Closing modal with result

@inject IModalService ModalService
<BsButton OnClick="ShowModalAsync" Variant="BsButtonVariant.Primary">Show Modal</BsButton>
@code {
    private async void ShowModalAsync()
    {
        var modalReference = await ModalService.ShowDialogAsync<ModalServiceResultDialogExample>();
        var result = await modalReference.WaitClosedAsync<bool>();
        Console.WriteLine($"Modal closed with result '{result}'.");
    }
}

ModalServiceResultDialogExample.razor

<BsModalDialogShorthand>
    Hi
    <BsButton OnClick="() => ModalReference.CloseAsync(true)">Close myself</BsButton>
</BsModalDialogShorthand>
@code{
    [CascadingParameter]
    public required IModalReference ModalReference { get; set; }
}

Opening using a RenderFragment

@inject IModalService ModalService
<BsButton OnClick="ShowModalAsync" Variant="BsButtonVariant.Primary">Show Modal</BsButton>
@code {
    private async void ShowModalAsync()
    {
        await ModalService.ShowDialogAsync(
            @<BsModalDialogShorthand Title="Render fragment title">
                Render fragment
            </BsModalDialogShorthand>, 
            new ModalOptions { Keyboard = false, Backdrop = BsModalBackdrop.Static });
    }
}

RenderFragment with modal reference

Last result:

@inject IModalService ModalService
<BsButton OnClick="ShowModalAsync" Variant="BsButtonVariant.Primary">Show Modal</BsButton>
<div>Last result: @_lastResult</div>
@code {
    private bool? _lastResult;
    private async void ShowModalAsync()
    {
        var modalReference = await ModalService.ShowDialogAsync(modalReference => 
            @<BsModalDialogShorthand ShowPrimaryButton
                                     PrimaryButtonText="Save and close"
                                     OnPrimaryButtonClick="() => modalReference.CloseAsync(true)"
                                     Title="Render fragment + reference title">
                Render fragment with modal reference
            </BsModalDialogShorthand>,
            new ModalOptions { Keyboard = false, Backdrop = BsModalBackdrop.Static }
        );
        _lastResult = await modalReference.WaitClosedAsync<bool>();
        StateHasChanged();
    }
}