Modal component

The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.

  • <Modal> the main container
    • <ModalContent> a horizontally and vertically centered container, in which you can include any content
      • <ModalHeader> top part of the modal, usually contains a title and close button
        • <ModalTitle> a modal title
        • <CloseButton> a simple close button located in the top right corner
      • <ModalBody> main part of the modal, holds the input fields, images, etc.
      • <ModalFooter> bottom part of the modal, usually contains the action buttons

Examples

Basic

Place the modal markup somewhere at root of you component layout.

To work with the modal you must use the reference to the Modal component. 
<Button Color="Color.Primary" Clicked="@ShowModal">Show Modal</Button>

<Modal @ref="modalRef">
    <ModalContent Centered>
        <ModalHeader>
            <ModalTitle>Employee edit</ModalTitle>
            <CloseButton />
        </ModalHeader>
        <ModalBody>
            <Field>
                <FieldLabel>Name</FieldLabel>
                <TextEdit Placeholder="Enter name..." />
            </Field>
            <Field>
                <FieldLabel>Surname</FieldLabel>
                <TextEdit Placeholder="Enter surname..." />
            </Field>
        </ModalBody>
        <ModalFooter>
            <Button Color="Color.Secondary" Clicked="@HideModal">Close</Button>
            <Button Color="Color.Primary" Clicked="@HideModal">Save Changes</Button>
        </ModalFooter>
    </ModalContent>
</Modal>

@code{
    // reference to the modal component
    private Modal modalRef;

    private Task ShowModal()
    {
        return modalRef.Show();
    }

    private Task HideModal()
    {
        return modalRef.Hide();
    }
}

Two-way binding

You can also control the Modal visibility by declaring the Visible state.
Modal is visible: False 
<Button Color="Color.Primary" Clicked="@ShowModal">Show Modal</Button>

<Span Margin="Margin.Is3.FromStart">Modal is visible: @modalVisible</Span>

<Modal @bind-Visible="@modalVisible">
    <ModalContent Centered>
        <ModalHeader>
            <ModalTitle>Employee edit</ModalTitle>
            <CloseButton />
        </ModalHeader>
        <ModalBody>
            <Field>
                <FieldLabel>Name</FieldLabel>
                <TextEdit Placeholder="Enter name..." />
            </Field>
            <Field>
                <FieldLabel>Surname</FieldLabel>
                <TextEdit Placeholder="Enter surname..." />
            </Field>
        </ModalBody>
        <ModalFooter>
            <Button Color="Color.Secondary" Clicked="@HideModal">Close</Button>
            <Button Color="Color.Primary" Clicked="@HideModal">Save Changes</Button>
        </ModalFooter>
    </ModalContent>
</Modal>

@code{
    private bool modalVisible;

    private Task ShowModal()
    {
        modalVisible = true;

        return Task.CompletedTask;
    }

    private Task HideModal()
    {
        modalVisible = false;

        return Task.CompletedTask;
    }
}

Closing

If you want to prevent modal from closing you can use Closing event. 
<Button Color="Color.Primary" Clicked="@ShowModal">Show Modal</Button>

<Modal @ref="modalRef" Closing="@OnModalClosing">
    <ModalContent Centered>
        <ModalHeader>
            <ModalTitle>Closing modal</ModalTitle>
        </ModalHeader>
        <ModalBody>
            Click on the buttons to close the modal.
        </ModalBody>
        <ModalFooter>
            <Button Color="Color.Secondary" Clicked="@CloseModal">This will close the modal</Button>
            <Button Color="Color.Primary" Clicked="@TryCloseModal">This will not</Button>
        </ModalFooter>
    </ModalContent>
</Modal>

@code {
    // reference to the modal component
    private Modal modalRef;

    private bool cancelClose;

    private Task ShowModal()
    {
        return modalRef.Show();
    }

    private Task CloseModal()
    {
        cancelClose = false;

        return modalRef.Hide();
    }

    private Task TryCloseModal()
    {
        cancelClose = true;

        return modalRef.Hide();
    }

    private Task OnModalClosing( ModalClosingEventArgs e )
    {
        // just set Cancel to prevent modal from closing
        e.Cancel = cancelClose 
            || e.CloseReason != CloseReason.UserClosing;

        return Task.CompletedTask;
    }
}

Fullscreen

If the built-in sizes are not enough you can show the modal in fullscreen. 
<Button Color="Color.Primary" Clicked="@ShowModal">Show Modal</Button>

<Modal @ref="modalRef">
    <ModalContent Size="ModalSize.Fullscreen">
        <ModalHeader>
            <ModalTitle>Employee edit</ModalTitle>
            <CloseButton />
        </ModalHeader>
        <ModalBody>
            <Field>
                <FieldLabel>Name</FieldLabel>
                <TextEdit Placeholder="Enter name..." />
            </Field>
            <Field>
                <FieldLabel>Surname</FieldLabel>
                <TextEdit Placeholder="Enter surname..." />
            </Field>
        </ModalBody>
        <ModalFooter>
            <Button Color="Color.Secondary" Clicked="@HideModal">Close</Button>
            <Button Color="Color.Primary" Clicked="@HideModal">Save Changes</Button>
        </ModalFooter>
    </ModalContent>
</Modal>

@code{
    // reference to the modal component
    private Modal modalRef;

    private Task ShowModal()
    {
        return modalRef.Show();
    }

    private Task HideModal()
    {
        return modalRef.Hide();
    }
}

Best Practices

Use Sparingly

Modal dialogs are disruptive by nature and should be used sparingly. Do not use them to communicate nonessential information, such as success messages like "Logged in", "Copied", etc. Instead, use Notifications when appropriate.

Functions

Name Description
Show() Open the modal dialog.
Hide() Close the modal dialog.

Attributes

Modal

Name Description Type Default
Visible Handles the visibility of modal dialog. boolean false
VisibleChanged Occurs when the modal visibility state changes. EventCallback<bool>
Opening Occurs before the modal is opened and can be used to prevent the modal from opening. Func<ModalOpeningEventArgs, Task>
Closing Occurs before the modal is closed and can be used to prevent the modal from closing. Func<ModalClosingEventArgs, Task>
Opened Occurs after the modal has opened. EventCallback
Closed Occurs after the modal has closed. EventCallback
ScrollToTop If true modal will scroll to top when opened. boolean true
ShowBackdrop If true the the backdrop will be rendered. boolean true
Animated Gets or sets whether the component has any animations. boolean true
AnimationDuration Gets or sets the animation duration. int 150
RenderMode Defines how the modal content will be rendered. ModalRenderMode Default

ModalContent

Name Description Type Default
Centered Centers the modal vertically. boolean false
Scrollable Scrolls the modal content independent of the page itself. boolean false
Size Changes the size of the modal. ModalSize Default

ModalBody

Name Description Type Default
MaxHeight Sets the maximum height of the modal body (in viewport size unit). int? null

ModalTitle

Name Description Type Default
Size Sets the title size and tag name. HeadingSize Is4