HxModal #

Component to render modal dialog as a Bootstrap Modal.

Basic 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 set to ModalBackdrop.Static, the modal will not close when clicking outside of 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 #

Event callbacks #

Methods #

Static properties #