Modal

Modal Component

The Modal component enables you to add dialogs to your site or application for lightboxes, user notification, or virtually any kind of custom content that you want to have the user focus on.

Inheritance

Modal : BootstrapComponentBase

Parameters

Name	Type	Description
Backdrop	Backdrop?	Specifies adjustments for the modal backdrop.
Body	string	The body text to show in the body area of the dialog.
BodyTemplate	RenderFragment<string>	Allows you to fully customize the body of the dialog. Consider using ModalBody as a wrapper for your custom content. See samples below.
FooterTemplate	RenderFragment	Allows you to specify content for the footer of your dialog. Consider using ModalFooter as wrapper for your footer content. See samples below.
Header	string	The header text to show in the header section of the dialog.
HeaderTemplate	RenderFragment<string>	Allows you to customize the header of your dialog. Consider using the ModalHeader and CloseModalButton components when customizing the header. See samples below.

Events

Name	Description
OnHide	Fires when the modal is beginning to hide.
OnHidden	Fires when the modal has been hidden.
OnHidePrevented	Fires when hiding the modal has been prevented.
OnShow	Fires when the modal is beginning to show.
OnShown	Fires when the modal has been shown.

Examples

This section shows different ways how to use the Modal component.

Simple Modal

Shows the most simple way of adding a modal dialog to your application. Since a modal dialog is hidden by default, it needs a trigger to show it. A button is used in the sample below.

@code {
    Modal myModal;
}
<Button OnClick="async () => { await this.myModal.ShowAsync(); }">Show Modal</Button>
<Modal @ref=this.myModal Body="This is a simple modal dialog with only this message in the body.">
</Modal>

Customizing the Header

You can customize the contents of the header section of the modal dialog with the help of the HeaderTemplate property. The value of the Header property is passed to the template as the context variable, so you can use whatever value specified in your custom template.

Note! When you specify your custom header, need to specify the entire header element including the optional close button. The ModalHeader and CloseModalButton components are useful when building your custom header.

<Modal Header="A Large Header">
    <HeaderTemplate>
        <ModalHeader BackgroundColor="NamedColor.Dark" TextColor="NamedColor.Light">
            <Heading Level="HeadingLevel.H1" Display="HeadingDisplay.Display1">
                @context
            </Heading>
            <ModalCloseIcon />
        </ModalHeader>
    </HeaderTemplate>
</Modal>

Customizing the Body

You can provide your custom body content for the dialog with the help of the BodyTemplate template property. The value of the Body property is passed as context variable to your custom template. You can use it in your template, or provide another value.

The use of the ModalBody component is optional, but it adds proper padding to the body of the dialog.

<Modal Body="This is the body of the modal dialog.">
    <BodyTemplate>
        <ModalBody>
            <Paragraph style="font-family: Arial, Helvetica, sans-serif">
                @context
            </Paragraph>
        </ModalBody>
    </BodyTemplate>
</Modal>

Customizing the Footer

Since the footer of a Modal usually contains links or buttons to interact with the dialog, the only way to add content to the footer is by using the FooterTemplate template property, as shown below. This creates a footer with two buttons aligned to the right.

The use of the ModalFooter component is optional, but it adds proper padding to the footer section of your dialog.

<Modal>
    <FooterTemplate>
        <ModalFooter>
            <Button Color="NamedColor.Primary">OK</Button>
            <Button Color="NamedColor.Light" MarginLeft="Spacing.One">Cancel</Button>
        </ModalFooter>
    </FooterTemplate>
</Modal>

Advanced Customization

The sample below shows you how you can add the body of your dialog without using the ModalBody component. This will make your content fill the entire body area without the padding added by ModalBody.

<Modal Header="Custom Body">
    <BodyTemplate>
        <Card Title="Card with Image" ImageUrl="..."></Card>
    </BodyTemplate>
    <FooterTemplate>
        <ModalFooter>
            <Button Color="NamedColor.Primary">OK</Button>
        </ModalFooter>
    </FooterTemplate>
</Modal>