Bootstrap Blazor enterprise-level UI component library

Basic usage

A dialog box pops up, suitable for scenarios that require more customization

Demo

by setting Modal component IsKeyboard:true parameter, whether to open the pop-up window is supported ESC

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Modals> Localizer

<div class="modal d-block position-relative" style="z-index: 2;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">@Localizer["ModalsNormalPopupTitle"]</h5>
                <button type="button" class="btn-close" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>@Localizer["ModalsNormalPopupText"]</p>
            </div>
            <div class="modal-footer">
                <Button Color="Color.Secondary" Text="Close" Icon="fa-solid fa-xmark"></Button>
                <Button Text="Save" Icon="fa-solid fa-floppy-disk"></Button>
            </div>
        </div>
    </div>
</div>
<div class="mt-3">
    <p>@((MarkupString)Localizer["ModalsNormalIsKeyboard"].Value)</p>
    <Button OnClick="() => Modal.Toggle()">@Localizer["ModalsNormalPopups"]</Button>
</div>
<Modal @ref="Modal" IsKeyboard="true">
    <ModalDialog Title="@Localizer["ModalsNormalDefaultPopup"]">
        <BodyTemplate>
            <div>@Localizer["ModalsNormalDefaultPopupText"]</div>
        </BodyTemplate>
    </ModalDialog>
</Modal>

@code {
    [NotNull]
    private Modal? Modal { get; set; }
}

IsBackdrop background off mode

Click the area outside the pop-up window to close the pop-up window effect by default

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Modals> Localizer

<Button OnClick="() => BackdropModal.Toggle()">@Localizer["ModalsNormalPopups"]</Button>
<Modal @ref="BackdropModal" IsBackdrop="true">
    <ModalDialog Title="@Localizer["ModalsIsBackdropToClose"]">
        <BodyTemplate>
            <div>@Localizer["ModalsTitlePopupWindowText"]</div>
        </BodyTemplate>
    </ModalDialog>
</Modal>

@code {
    [NotNull]
    private Modal? BackdropModal { get; set; }
}

Bullet size

Set the size of the popup component through Size

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Modals> Localizer

<div class="row g-3">
    <div class="col-12 col-sm-4 col-lg-auto">
        <Button OnClick="() => SmailModal.Toggle()">@Localizer["ModalsSmallPopup"]</Button>
        <Modal @ref="SmailModal">
            <ModalDialog Size="Size.Small" Title="@Localizer["ModalsSmallPopup"]">
                <BodyTemplate>
                    <div>@Localizer["ModalsTitlePopupWindowText"]</div>
                </BodyTemplate>
            </ModalDialog>
        </Modal>
    </div>
    <div class="col-12 col-sm-4 col-lg-auto">
        <Button OnClick="() => LargeModal.Toggle()">@Localizer["ModalsBigPopup"]</Button>
        <Modal @ref="LargeModal">
            <ModalDialog Size="Size.Large" Title="@Localizer["ModalsBigPopup"]">
                <BodyTemplate>
                    <div>@Localizer["ModalsTitlePopupWindowText"]</div>
                </BodyTemplate>
            </ModalDialog>
        </Modal>
    </div>
    <div class="col-12 col-sm-4 col-lg-auto">
        <Button OnClick="() => ExtraLargeModal.Toggle()">@Localizer["ModalsOversizedPopup"]</Button>
        <Modal @ref="ExtraLargeModal">
            <ModalDialog Size="Size.ExtraLarge" Title="@Localizer["ModalsOversizedPopup"]">
                <BodyTemplate>
                    <div>@Localizer["ModalsTitlePopupWindowText"]</div>
                </BodyTemplate>
            </ModalDialog>
        </Modal>
    </div>
    <div class="col-12 col-sm-4 col-lg-auto">
        <Button OnClick="() => ExtraExtraLargeModal.Toggle()">@Localizer["ModalsSuperLargePopup"]</Button>
        <Modal @ref="ExtraExtraLargeModal">
            <ModalDialog Size="Size.ExtraExtraLarge" Title="@Localizer["ModalsSuperLargePopup"]">
                <BodyTemplate>
                    <div>@Localizer["ModalsTitlePopupWindowText"]</div>
                </BodyTemplate>
            </ModalDialog>
        </Modal>
    </div>
</div>

@code {
    [NotNull]
    private Modal? SmailModal { get; set; }

    [NotNull]
    private Modal? LargeModal { get; set; }

    [NotNull]
    private Modal? ExtraLargeModal { get; set; }

    [NotNull]
    private Modal? ExtraExtraLargeModal { get; set; }
}

Full screen popup

Just set the property FullScreenSize

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Modals> Localizer

<div class="row g-3">
    <div class="col-12 col-sm-4 col-lg-auto">
        <Button OnClick="() => SmailFullScreenModal.Toggle()">@Localizer["ModalsFullScreenPopup"]</Button>
        <Modal @ref="SmailFullScreenModal">
            <ModalDialog FullScreenSize="FullScreenSize.Always" Title="@Localizer["ModalsFullScreenPopup"]">
                <BodyTemplate>
                    <div>@Localizer["ModalsTitlePopupWindowText"]</div>
                </BodyTemplate>
            </ModalDialog>
        </Modal>
    </div>
    <div class="col-12 col-sm-4 col-lg-auto">
        <Button OnClick="() => LargeFullScreenModal.Toggle()">@Localizer["ModalsFullScreenPopup992"]</Button>
        <Modal @ref="LargeFullScreenModal">
            <ModalDialog FullScreenSize="FullScreenSize.Large" Title="@Localizer["ModalsLargeFullScreenPopup"]">
                <BodyTemplate>
                    <div>@Localizer["ModalsTitlePopupWindowText"]</div>
                </BodyTemplate>
            </ModalDialog>
        </Modal>
    </div>
    <div class="col-12 col-sm-4 col-lg-auto">
        <Button OnClick="() => ExtraLargeFullScreenModal.Toggle()">@Localizer["ModalsFullScreenPopup1200"]</Button>
        <Modal @ref="ExtraLargeFullScreenModal">
            <ModalDialog FullScreenSize="FullScreenSize.ExtraLarge" Title="@Localizer["ModalsLargeFullScreenPopupWindow"]">
                <BodyTemplate>
                    <div>@Localizer["ModalsTitlePopupWindowText"]</div>
                </BodyTemplate>
            </ModalDialog>
        </Modal>
    </div>
    <div class="col-12 col-sm-4 col-lg-auto">
        <Button OnClick="() => ExtraExtraLargeFullScreenModal.Toggle()">@Localizer["ModalsFullScreenPopup1400"]</Button>
        <Modal @ref="ExtraExtraLargeFullScreenModal">
            <ModalDialog FullScreenSize="FullScreenSize.ExtraExtraLarge" Title="@Localizer["ModalsSuperLargeFullScreenPopupWindow"]">
                <BodyTemplate>
                    <div>@Localizer["ModalsTitlePopupWindowText"]</div>
                </BodyTemplate>
            </ModalDialog>
        </Modal>
    </div>
</div>

@code {
    [NotNull]
    private Modal? SmailFullScreenModal { get; set; }

    [NotNull]
    private Modal? LargeFullScreenModal { get; set; }

    [NotNull]
    private Modal? ExtraLargeFullScreenModal { get; set; }

    [NotNull]
    private Modal? ExtraExtraLargeFullScreenModal { get; set; }
}

Center vertically

Set the vertical centering of the popup component via IsCentered

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Modals> Localizer

<Button OnClick="() => CenterModal.Toggle()">@Localizer["ModalsVerticallyCenteredPopup"]</Button>
<Modal @ref="CenterModal">
    <ModalDialog IsCentered="true" Title="@Localizer["ModalsVerticallyCenteredPopup"]">
        <BodyTemplate>
            <div>@Localizer["ModalsTitlePopupWindowText"]</div>
        </BodyTemplate>
    </ModalDialog>
</Modal>

@code {
    [NotNull]
    private Modal? CenterModal { get; set; }
}

Extra long content

Use IsScrolling to set the scroll wheel sliding function of the pop-up frame component for the excess content

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Modals> Localizer

<div class="row g-3">
    <div class="col-12 col-sm-4 col-lg-auto">
        <Button OnClick="() => LongContentModal.Toggle()">@Localizer["ModalsVeryLongContent"]</Button>
        <Modal @ref="LongContentModal">
            <ModalDialog IsCentered="true" Title="@Localizer["ModalsVeryLongContent"]">
                <BodyTemplate>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                </BodyTemplate>
            </ModalDialog>
        </Modal>
    </div>
    <div class="col-12 col-sm-4 col-lg-auto">
        <Button OnClick="() => ScrollModal.Toggle()">@Localizer["ModalsScrollBarPopup"]</Button>
        <Modal @ref="ScrollModal">
            <ModalDialog IsCentered="true" IsScrolling="true" Title="@Localizer["ModalsScrollBarPopup"]">
                <BodyTemplate>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
                    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
                </BodyTemplate>
            </ModalDialog>
        </Modal>
    </div>
</div>

@code {
    [NotNull]
    private Modal? LongContentModal { get; set; }

    [NotNull]
    private Modal? ScrollModal { get; set; }
}

Draggable popup

Click on the title bar of the pop-up window to drag and drop the pop-up window

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Modals> Localizer

<Button OnClick="() => DragModal.Toggle()">@Localizer["ModalsNormalPopups"]</Button>
<Modal @ref="DragModal">
    <ModalDialog Title="@Localizer["ModalsNormalDefaultPopup"]" IsDraggable="true" ShowMaximizeButton="true">
        <BodyTemplate>
            <div>@Localizer["ModalsTitlePopupWindowText"]</div>
        </BodyTemplate>
    </ModalDialog>
</Modal>

@code {
    [NotNull]
    private Modal? DragModal { get; set; }
}

Maximize button

Show the maximize button by setting the ShowMaximinzeButton popup

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Modals> Localizer

<Button OnClick="() => MaximizeModal.Toggle()">@Localizer["ModalsNormalPopups"]</Button>
<Modal @ref="MaximizeModal">
    <ModalDialog Title="@Localizer["ModalsMaximizePopup"]" ShowMaximizeButton="true">
        <BodyTemplate>
            <div>@Localizer["ModalsTitlePopupWindowText"]</div>
        </BodyTemplate>
    </ModalDialog>
</Modal>

@code {
    [NotNull]
    private Modal? MaximizeModal { get; set; }
}

Popup shows callback method

By setting the ShowCallbackAsync callback delegate, this method will be recalled after the pop-up window is displayed

Demo

@inject IStringLocalizer<BootstrapBlazor.Shared.Samples.Modals> Localizer

<Button OnClick="() => ShownCallbackModal.Toggle()">@Localizer["ModalsNormalPopups"]</Button>
<Modal @ref="ShownCallbackModal" OnShownAsync="OnShownCallbackAsync">
    <ModalDialog Title="ShownCallbackAsync 回调示例">
        <BodyTemplate>
            <div>@Localizer["ModalsShownCallbackAsyncIntro"]</div>
        </BodyTemplate>
    </ModalDialog>
</Modal>
<BlockLogger @ref="Trace" class="mt-3" />

@code {
    [NotNull]
    private Modal? ShownCallbackModal { get; set; }

    [NotNull]
    private BlockLogger? Trace { get; set; }

    private Task OnShownCallbackAsync()
    {
        Trace.Log("弹窗已显示");
        return Task.CompletedTask;
    }
}

Modal box

Inform the user and host relevant actions while preserving the current page state

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Attributes

Bootstrap Blazor Component library updated to 7.4.4-beta01

Modal box

Inform the user and host relevant actions while preserving the current page state

Demo

Popup title

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Demo

Attributes

Bootstrap Blazor Component library updated to 7.4.4-beta01