HxModal #

Component for rendering a modal dialog as a Bootstrap Modal. Visit Bootstrap Modal for more information.

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 the 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 independently 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 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 #