Modal
Use Modal component enables the inclusion of dialog boxes for various purposes, including lightboxes, user notifications, and fully customized content displays.
How it works #
The Modal component provides a flexible dialog box for displaying content, notifications, or custom UI overlays in your Blazor application.
How to use:
This demo shows the simplest way to display a modal with custom content and how to open it programmatically.
How to use:
- Add the
Modalcomponent to your page and assign it a@refvariable. - Place your modal content inside the
Modaltags. You can use any Blazor or HTML elements. - Trigger the modal to open by calling
modalRef.Show()from your code (e.g., in a button click handler). - Optionally, customize the close button using the
CloseButtonCssClassparameter.
<Modal @ref="modalRef" CloseButtonCssClass="is-large">
<Box>
Modal content text goes here.
</Box>
</Modal>
<Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="ShowModal">Show Modal</Button>
@code {
private Modal modalRef = default!;
private void ShowModal() => modalRef.Show();
}Classic modal #
The Classic Modal example demonstrates a modal with a structured layout, including a title, body, and footer with action buttons.
How to use:
This demo illustrates a typical modal dialog pattern, suitable for forms, confirmations, or any scenario requiring user interaction.
How to use:
- Use the
TitleContent,BodyContent, andFootContentnamed fragments to organize your modal's sections. - Add action buttons to the footer, such as "Save changes" or "Cancel".
- Control the modal's visibility by calling
modalRef.Show()andmodalRef.Hide()in your event handlers.
Modal title
<Modal @ref="modalRef">
<TitleContent>
Modal title
</TitleContent>
<BodyContent>
Content goes here.
</BodyContent>
<FootContent>
<Buttons>
<Button Color="ButtonColor.Primary">Save changes</Button>
<Button @onclick="HideModal">Cancel</Button>
</Buttons>
</FootContent>
</Modal>
<Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="ShowModal">Show Modal</Button>
@code {
private Modal modalRef = default!;
private void HideModal() => modalRef.Hide();
private void ShowModal() => modalRef.Show();
}Events #
The Modal Events example shows how to handle modal lifecycle events, such as when the modal is shown or hidden.
How to use:
This demo logs modal events to the page, helping you track user interactions and respond to modal state changes.
How to use:
- Attach event handlers to the
OnShownandOnHiddenparameters of theModalcomponent. - Use these handlers to perform actions or update state when the modal opens or closes (e.g., logging, refreshing data).
- Display or process event information as needed in your UI.
Modal title
<Modal @ref="modalRef" OnHidden="OnModalHidden" OnShown="OnModalShown">
<TitleContent>
Modal title
</TitleContent>
<BodyContent>
Content goes here.
</BodyContent>
<FootContent>
<Buttons>
<Button Color="ButtonColor.Primary">Save changes</Button>
<Button @onclick="HideModal">Cancel</Button>
</Buttons>
</FootContent>
</Modal>
<Button Color="ButtonColor.Link" Size="ButtonSize.Small" @onclick="ShowModal">Show Modal</Button>
<div class="mt-3">
@foreach (var item in messages)
{
<p>Event: @item</p>
}
</div>
@code {
private Modal modalRef = default!;
List<string> messages = new();
private void HideModal() => modalRef.Hide();
private void ShowModal() => modalRef.Show();
private void OnModalHidden() => messages.Add($"Modal hidden, Time: {DateTime.Now.ToString()}");
private void OnModalShown() => messages.Add($"Modal shown, Time: {DateTime.Now.ToString()}");
}