Modal

This documentation provides a comprehensive reference for the Modal component, guiding you through its configuration options.
Demos

Screenshot #

Blazor Modal Component

Parameters #

Name Type Default Required Description Added Version
AdditionalAttributes Dictionary<string, object>? null Gets or sets additional attributes that will be applied to the component. 1.0.0
BodyCssClass string? null Gets or sets the body CSS class. 1.0.0
BodyTemplate RenderFragment? null Gets or sets the body template. 1.0.0
Class string? null Gets or sets the CSS class name(s) to apply to the component. 1.0.0
CloseIconColor IconColor None Gets or sets the close icon color. 1.0.0
CloseOnEscape bool True Indicates whether the modal closes when escape key is pressed. 1.0.0
DialogCssClass string? null Gets or sets the modal dialog (div.modal-dialog) CSS class. 1.0.0
FooterCssClass string? null Gets or sets the footer CSS class. 1.0.0
FooterTemplate RenderFragment? null Gets or sets the footer template. 1.0.0
Fullscreen ModalFullscreen Disabled Gets or sets the fullscreen behavior of the modal. 1.0.0
HeaderCssClass string? null Gets or sets the header CSS class. 1.0.0
HeaderTemplate RenderFragment? null Gets or sets the header template. 1.0.0
Id string? null Gets or sets the ID. If not set, a unique ID will be generated. 1.0.0
IsScrollable bool False If true, scroll will be enabled on the modal body. 1.0.0
IsServiceModal bool False Indicates whether the modal is related to a modal service or not. 1.9.4
IsVerticallyCentered bool False If true, shows the modal vertically in the center. 1.0.0
Message string? null Gets or sets the message. 1.0.0
ModalType ModalType None Gets or sets the modal type. 1.9.5
ShowCloseButton bool True If true, close button will be visible in the modal header. 1.0.0
Size ModalSize Regular Gets or sets the modal size. 1.0.0
Style string? null Gets or sets the CSS style string that defines the inline styles for the component. 1.0.0
TabIndex int -1 Gets or sets the modal tab index. 1.6.0
Title string? null Gets or sets the modal header title. 1.0.0
UseStaticBackdrop bool False Indicates whether the modal uses a static backdrop. 1.0.0

Methods #

Name Return type Description Added Version
HideAsync() Task Hides a modal. 1.0.0
ShowAsync() Task Opens a modal. 1.4.1
ShowAsync(string title, string? message, Dictionary<string, object>? parameters) Task Opens a modal. T is component. 1.0.0

Events #

Name Return Type Description Added Version
OnHidden EventCallback This event is fired when an offcanvas element has been hidden from the user (will wait for CSS transitions to complete). 1.0.0
OnHidePrevented EventCallback This event is fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option or data-bs-keyboard set to false. 1.0.0
OnHiding EventCallback This event is fired immediately when the hide method has been called. 1.0.0
OnShowing EventCallback This event fires immediately when the show instance method is called. 1.0.0
OnShown EventCallback This event is fired when an offcanvas element has been made visible to the user (will wait for CSS transitions to complete). 1.0.0
If you like Blazor Bootstrap, give it a star on GitHub!
Blazor Bootstrap Blazor Bootstrap
  • Designed and built with all the love in the world by the Blazor Bootstrap team with the help of our contributors.
  • Code licensed Apache License 2.0.
  • Currently v4.0.0.
  • Powered by .NET 10.0.0
Links
Guides
Community
Other Libraries

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please reload the page.