HxModal

Component to render modal dialog as a Bootstrap Modal.

Usage

<HxButton OnClick="HandleShowClick" Color="ThemeColor.Primary">Show modal</HxButton>

<HxModal @ref="myModal" Title="Modal title">
	<BodyTemplate>
		Modal body
	</BodyTemplate>
	<FooterTemplate>
		<HxButton Text="Close" OnClick="HandleHideClick" Color="ThemeColor.Primary" />
	</FooterTemplate>
</HxModal>

@code
{
	private HxModal myModal;

	private async Task HandleShowClick()
	{
		await myModal.ShowAsync();
	}

	private async Task HandleHideClick()
	{
		await myModal.HideAsync();
	}

}

Static backdrop

When backdrop is not set to static, the modal will 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 setting the Scrollable parameter.

Vertically centered

Set the Centered parameter to vertically center the modal.

Optional sizes

Fullscreen Modal

API

Parameters

Name Type Description
Title string Title in modal header.
HeaderTemplate RenderFragment Header template.
BodyTemplate RenderFragment Body template.
FooterTemplate RenderFragment Footer template.
Size ModalSize? Size of the modal. Default is ModalSize.Regular.
Fullscreen ModalFullscreen? Fullscreen behavior of the modal. Default is ModalFullscreen.Disabled.
ShowCloseButton bool? Indicates whether the modal shows close button in header. Default value is true.
CloseButtonIcon IconBase Close icon to be used in header. If set to null, Bootstrap default close-button will be used.
CloseOnEscape bool Indicates whether the modal closes when escape key is pressed. Default value is true.
UseStaticBackdrop bool Indicates whether the modal uses a static backdrop. Default value is true.
Scrollable bool? Allows scrolling the modal body. Default is false.
Centered bool? Allows vertical centering of the modal.
Default is false (horizontal only).
CssClass string Additional CSS class for the main element (div.modal).
DialogCssClass string Additional CSS class for the dialog (div.modal-dialog element).
HeaderCssClass string Additional header CSS class.
BodyCssClass string Additional body CSS class.
FooterCssClass string Footer css class.

Event Callbacks

Name Type Description
OnClosed EventCallback Raised when modal is closed (whatever reason it is).

Methods

Method Returns Description
ShowAsync() Task Opens the modal.
HideAsync() Task Closes the modal.

Static properties

Property Type Description
Defaults ModalDefaults Application-wide defaults for the HxGrid.
An unhandled error has occurred. Reload 🗙