Blazorise Modal component

Dialog is a small window that can be used to present information and user interface elements in an overlay.

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 title of the modal.

        • <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.

Fullscreen Mode

When using the Fullscreen mode for the Modal component, it's crucial to be aware of how you structure your layout within the ModalBody.

If the ModalBody is wrapped within a container that has the CSS property 'display' set to 'block', this can cause issues with the overflow behavior in the Fullscreen mode. Specifically, the 'display: block' CSS property can interfere with the automatic adjustments that are applied to the Modal in Fullscreen mode.

Impact:

This interference could lead to the loss of smooth scrolling, content being cut off, or the display not fitting correctly within the viewport dimensions.

Solution:

To avoid such problems

  1. Refrain from using 'display: block' style with containers within ModalBody when working in Fullscreen mode.

  2. As an alternative, consider using a container with the CSS property 'display' set to 'contents', eg. 'display: contents;'. This property value allows the container to behave as though it's replaced by its children. This way, you can ensure the structure and style of your content are compatible with the Fullscreen modal settings.

Please take this warning into consideration when implementing your Modals to ensure an optimal user experience and accurate content display.

Functions

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

API

Parameters

Modal

Parameter Description TypeDefault
Animated

Gets or sets whether the component has any animations.

 booltrue
AnimationDuration

Gets or sets the animation duration, in milliseconds.

 int150
ChildContent

Specifies the content to be rendered inside this Modal.

 RenderFragmentnull
FocusTrap

Defines if the modal should keep the input focus at all times.

 bool?null
RenderMode

Defines how the modal content will be rendered.

Possible values:Default, LazyLoad, LazyReload

 ModalRenderModeModalRenderMode.Default
ScrollToTop

If true modal will scroll to top when opened.

 booltrue
ShowBackdrop

Specifies the backdrop needs to be rendered for this Modal.

 booltrue
Visible

Defines the visibility of modal dialog.

Remarks

The Visible parameter should only be used in .razor code.

 boolfalse

ModalContent

Parameter Description TypeDefault
Centered

Centers the modal vertically.

 boolfalse
ChildContent

Specifies the content to be rendered inside this ModalContent.

 RenderFragmentnull
Scrollable

Scrolls the modal content independent of the page itself.

 boolfalse
Size

Changes the size of the modal.

Possible values:Default, Small, Large, ExtraLarge, Fullscreen

 ModalSizeModalSize.Default

ModalBody

Parameter Description TypeDefault
ChildContent

Specifies the content to be rendered inside this ModalBody.

 RenderFragmentnull
MaxHeight

Sets the maximum height of the modal body (in viewport size unit).

 int?null

ModalTitle

Parameter Description TypeDefault
ChildContent

Specifies the content to be rendered inside this ModalTitle.

 RenderFragmentnull
Size

Gets or sets the title size.

Possible values:Is1, Is2, Is3, Is4, Is5, Is6

 HeadingSizeHeadingSize.Is4

Events

Modal

Event Description Type
Closed

Occurs after the modal has closed.

 EventCallback
Closing

Occurs before the modal is closed.

 Func<ModalClosingEventArgs, Task>
Opened

Occurs after the modal has opened.

 EventCallback
Opening

Occurs before the modal is opened.

 Func<ModalOpeningEventArgs, Task>
VisibleChanged

Occurs when the modal visibility state changes.

 EventCallback<bool>

Methods

Modal

Method DescriptionReturnParameters
Show Starts the modal opening process. Task
Hide Fires the modal dialog closure process. Task
IsSafeToClose Finds if the closable component is ready to be closed. Task<bool>string elementId, CloseReason closeReason, bool isChildClicked
Close Triggers the closable component to be closed. TaskCloseReason closeReason
On this page