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

Refrain from using 'display: block' style with containers within ModalBody when working in Fullscreen mode.
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.