logo

Modal

Modal dialogs.

When To Use

When requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow, you can use Modal to create a new floating layer over the current page to get user feedback or display information. Additionally, if you need show a simple confirmation dialog, you can use ModalService.Confirm(), and so on.

Examples

Basic modal.

expand code expand code

Set the Hender property to customize the header of the Modal. Default header component in ModelHeader.razor.

Otherwise, if Hender is set to null, the header can be hidden.

expand code expand code

Use confirm() to show a confirmation modal dialog.

expand code expand code

In the various types of information modal dialog, only one button to close dialog is provided.

expand code expand code

You can use centered,style.top or other styles to set position of modal dialog.

expand code expand code

Modal.destroyAll() will destroy all confirmation modal dialogs. Usually, you can use it in router change event to destroy confirm modal dialog automatically.

expand code expand code

Use Draggable to create a draggable Modal dialog, and you can control whether dragging is allowed only within the viewport through the parameter DragInViewport.

expand code expand code

Use IConfirmService.Show to show a built-in confirm dialog, similar to Windows MessageBox.

expand code expand code

Bind the submit of Form to the OK of Modal

expand code expand code

Modify the display of the scroll bar.

expand code expand code

Create a Confirm dialog box through ModalService, examples demonstrate user-defined templates, custom components.

Template code: ConfirmTemplateDemo.razor


@inherits FeedbackComponent<string, string>

<div>
    <Text>Please input "@config"</Text>
    value: <Input @bind-Value="value" Placeholder="@config" />
</div>

@code{

    string config;

    string value;

    protected override void OnInitialized()
    {
        config = this.Options;
        base.OnInitialized();
    }


    public override async Task OnFeedbackOkAsync(ModalClosingEventArgs args)
    {
        if (FeedbackRef is ConfirmRef confirmRef)
        {
            confirmRef.Config.OkButtonProps.Loading = true;
            await confirmRef.UpdateConfigAsync();
        }
        else if (FeedbackRef is ModalRef modalRef)
        {
            modalRef.Config.ConfirmLoading = true;
            await modalRef.UpdateConfigAsync();
        }

        await Task.Delay(1000);
        // only the input's value equals the initialized value, the OK button will close the confirm dialog box
        if (value != config)
            args.Cancel = true;
        else
            // method 1(not recommended): await (FeedbackRef as ConfirmRef<string>)!.OkAsync(value);
            // method 2: await (FeedbackRef as IOkCancelRef<string>)!.OkAsync(value);
            await base.OkCancelRefWithResult!.OnOk(value);

        await base.OnFeedbackOkAsync(args);
    }

    /// <summary>
    /// If you want <b>Dispose</b> to take effect every time it is closed in Modal, which created by ModalService,
    /// set <b>ModalOptions.DestroyOnClose = true</b>
    /// </summary>
    /// <param name="disposing"></param>
    protected override void Dispose(bool disposing)
    {
        Console.WriteLine("Dispose");
        base.Dispose(disposing);
    }
}

expand code expand code

Asynchronously close a modal dialog when a the OK button is pressed. For example, you can use this pattern when you submit a form.

Use one-way binding Visible to control.

expand code expand code

Use Confirm() to show a confirmation modal dialog. Asynchronous event OnCancel/OnOk can delay closing the dialog.

expand code expand code

To customize the text of the buttons, you need to set okText and cancelText props.

expand code expand code

Manually updating and destroying a modal from Modal.method.

expand code expand code

Passing okButtonProps and cancelButtonProps will customize the OK button and cancel button props.

expand code expand code

You can customize the text of the button to override the locale

expand code expand code

Allow Modal to maximize within the browser. The Maximizable parameter will display the button for maximizing Modal, and the DefaultMaximized parameter can control the maximization during Modal initialization. Maximizable and DefaultMaximized are not coupled with each other. Even if Maximizable=false and DefaultMaximized=true will ensure that the Modal is maximized during initialization.

Note:

  1. If Draggable is true, the position will be reset when the size is restored
  2. It is turned off when the Modal is maximized, and it will remain maximized when it is displayed again
expand code expand code

By setting Resizable=true, Modal can be resized horizontally.

expand code expand code

use dropdown or popup in modal.

expand code expand code

Create a Modal dialog box through ModalService, examples demonstrate custom components.

Template code: ModalTemplateDemo.razor

@inherits FeedbackComponent<Form.demo.Basic.Model>

<Form Model="@_model"
      LabelCol="new ColLayoutParam { Span = 8 }"
      WrapperCol="new ColLayoutParam { Span = 16 }"
      OnFinish="OnFinish"
      OnFinishFailed="OnFinishFailed">
    <FormItem Label="Username">
        <Input @bind-Value="@context.Username" />
    </FormItem>
    <FormItem Label="Password">
        <InputPassword @bind-Value="@context.Password" />
    </FormItem>
    <FormItem WrapperCol="new ColLayoutParam{ Offset = 8, Span = 16 }">
        <Checkbox @bind-Value="context.RememberMe">Remember me</Checkbox>
    </FormItem>
    <FormItem WrapperCol="new ColLayoutParam{ Offset = 8, Span = 16 }">
        <Button Type="@ButtonType.Primary" HtmlType="submit">
            Submit
        </Button>
    </FormItem>
</Form>

<br />
<br />


@code{


    private Form.demo.Basic.Model _model;

    protected override void OnInitialized()
    {
        _model = base.Options ?? new Form.demo.Basic.Model();
        base.OnInitialized();
    }

    private void OnFinish(EditContext editContext)
    {
        Console.WriteLine($"Success:{JsonSerializer.Serialize(_model)}");
        _ = base.FeedbackRef.CloseAsync();
    }

    private void OnFinishFailed(EditContext editContext)
    {
        Console.WriteLine($"Failed:{JsonSerializer.Serialize(_model)}");
    }
}

expand code expand code

Modal API#

Property Description Type Default Value
AfterClose ParameterSpecify a function that will be called when modal is closed Func<Task> --
BodyStyle ParameterBody style for modal body element. Such as height, padding etc String --
CancelText ParameterText or RenderFragment of the Cancel button, it will override the ModalLocale OneOf<String, RenderFragment?? --
Centered Parametercentered Boolean --
Closable ParameterWhether a close (x) button is visible on top right of the modal dialog or not Boolean true
Draggable ParameterWhether the modal dialog box be dragged Boolean --
DragInViewport ParameterDrag and drop only within the Viewport Boolean true
CloseIcon Parametercloser icon RenderFragment, the default is a "X" RenderFragment close-outline
ConfirmLoading ParameterWhether to apply loading visual effect for OK button or not Boolean --
DestroyOnClose ParameterWhether to unmount child components on onClose Boolean false
Header ParameterHeader content RenderFragment --
Footer ParameterFooter content, set as Footer=null when you don't need default buttons OneOf<String, RenderFragment?? --
GetContainer Parameterget or set the modal parent DOM, default is null: which is specifying document.body ElementReference? --
Keyboard ParameterWhether support press esc to close Boolean true
Mask ParameterWhether show mask or not Boolean true
MaskClosable ParameterWhether to close the modal dialog when the mask (area outside the modal) is clicked Boolean true
MaskStyle ParameterStyle for modal's mask element String --
OkText ParameterText of RenderFragment of the OK button, it will override the ModalLocale OneOf<String, RenderFragment?? null
OkType ParameterButton type of the OK button String ButtonType.Primary
Title ParameterThe modal dialog's title String --
TitleTemplate ParameterThe modal dialog's title. Takes priority over Title. RenderFragment --
Visible ParameterWhether the modal dialog is visible or not Boolean --
VisibleChanged ParameterSpecify a function invoke when the modal dialog is visible or not EventCallback<Boolean> --
Width ParameterWidth of the modal dialog, the default value is 520 OneOf<String, Double> 520
WrapClassName ParameterThe class name of the container of the modal dialog String --
ZIndex ParameterThe z-index of the Modal Int32 1000
OnCancel ParameterSpecify a function that will be called when a user clicks mask, close button on top right or Cancel button EventCallback<MouseEventArgs> --
OnOk ParameterSpecify a function that will be called when a user clicks the OK button EventCallback<MouseEventArgs> --
OkButtonProps ParameterThe OK button props ButtonProps --
CancelButtonProps ParameterThe Cancel button props ButtonProps --
ChildContent ParameterChild content RenderFragment --
Rtl Is RTL Boolean --
Locale ParameterModal Locale ModalLocale LocaleProvider.CurrentLocacle.Modal
MaxBodyHeight Parametermax modal content body height String --
Maximizable Parametershow modal maximize button Boolean false
MaximizeBtnIcon ParameterThe icon of the maximize button when the modal is in normal state RenderFragment fullscreen-outline
RestoreBtnIcon ParameterThe icon of the maximize button when the modal is maximized RenderFragment fullscreen-exit-outline
DefaultMaximized ParameterMaximize the Modal during component initialization, and it will ignore the Maximizable value. Boolean false
Resizable ParameterResizable (Horizontal direction only) Boolean --
ForceRender ParameterWhether to force to render the Modal dom before opening. Boolean --
Id ParameterID for the component's HTML String Uniquely Generated ID
Class ParameterSpecifies one or more class names for an DOM element. String --
Style ParameterSpecifies an inline style for a DOM element. String --
RefBack ParameterA ForwardRef instance. You can get a reference to the internal DOM by using AntDesign.ForwardRef.Current. ForwardRef --

ModalService API#

Method Signature Return Type Description
Confirm(ConfirmOptions props) ConfirmRef create and open a OK-Cancel Confirm dialog
Info(ConfirmOptions options) ConfirmRef create and open a OK-Cancel Confirm dialog with info icon
Success(ConfirmOptions options) ConfirmRef create and open a OK-Cancel Confirm dialog with success icon
Error(ConfirmOptions options) ConfirmRef create and open a OK-Cancel Confirm dialog with error icon
Warning(ConfirmOptions options) ConfirmRef create and open a OK-Cancel Confirm dialog with Warning icon
ConfirmAsync(ConfirmOptions props) Task<Boolean> create and open a OK-Cancel Confirm dialog, and return a bool value which indicates whether the OK button has been clicked
InfoAsync(ConfirmOptions options) Task<Boolean> create and open a OK-Cancel Confirm dialog with info icon, and return a bool value which indicates whether the OK button has been clicked
SuccessAsync(ConfirmOptions options) Task<Boolean> create and open a OK-Cancel Confirm dialog with success icon, and return a bool value which indicates whether the OK button has been clicked
ErrorAsync(ConfirmOptions options) Task<Boolean> create and open a OK-Cancel Confirm dialog with error icon, and return a bool value which indicates whether the OK button has been clicked
WarningAsync(ConfirmOptions options) Task<Boolean> create and open a OK-Cancel Confirm dialog with warning icon, and return a bool value which indicates whether the OK button has been clicked
Update(ConfirmRef confirmRef) Task update Confirm which Visible=true
UpdateConfirmAsync(ConfirmRef confirmRef) Task update Confirm which Visible=true
Destroy(ConfirmRef confirmRef) Task close a Confirm dialog
DestroyConfirmAsync(ConfirmRef confirmRef) Task close the Confirm dialog
DestroyAll() Task close all Confirm dialog
DestroyAllConfirmAsync() Task close all Confirm dialog
CreateAsync(ConfirmOptions config) Task<ConfirmRef> Create and open a OK-Cancel Confirm asynchronous
CreateConfirmAsync(ConfirmOptions config) Task<ConfirmRef> Create and open a OK-Cancel Confirm asynchronous
CreateAsync(ConfirmOptions config, TComponentOptions componentOptions) Task<ConfirmRef<TResult>> Create and open template Confirm dialog
CreateConfirmAsync(ConfirmOptions config, TComponentOptions componentOptions) Task<ConfirmRef<TResult>> Create and open template Confirm dialog
CreateModal(ModalOptions options) ModalRef Create and open a Modal
CreateModal(ModalOptions options) ModalRef<TResult> Create and open a Modal
CreateModal(ModalOptions options, TComponentOptions componentOptions) ModalRef Create and open a Modal with template
CreateModal(ModalOptions options, TComponentOptions componentOptions) ModalRef<TResult> Create and open a Modal with template component
CreateModalAsync(ModalOptions options) Task<ModalRef> Create and open a Modal
CreateModalAsync(ModalOptions options) Task<ModalRef<TResult>> Create and open a Modal
CreateModalAsync(ModalOptions options, TComponentOptions componentOptions) Task<ModalRef> Create and open a Modal with template
CreateModalAsync(ModalOptions options, TComponentOptions componentOptions) Task<ModalRef<TResult>> Create and open a Modal with template

ConfirmService API#

Method Signature Return Type Description
Show(OneOf<String, RenderFragment> content, OneOf<String, RenderFragment> title, ConfirmButtons confirmButtons, ConfirmIcon confirmIcon, ConfirmButtonOptions options, ConfirmAutoFocusButton? autoFocusButton) Task<ConfirmResult> show a confirm dialog like MessageBox of Windows
Show(OneOf<String, RenderFragment> content, OneOf<String, RenderFragment> title, ConfirmButtons confirmButtons, ConfirmIcon confirmIcon) Task<ConfirmResult> show a confirm dialog like MessageBox of Windows

ConfirmOptions API#

Property Description Type Default Value
Locale Confirm Locale ConfirmLocale --
ClassName the class name of the element of ".ant-modal" String --
Visible Boolean --
Content ChildContent OneOf<String, RenderFragment> --
Icon Confirm left top icon RenderFragment --
Style .ant-modal element's style String --
AutoFocusButton ConfirmAutoFocusButton --
OkType set OK button type for the leftmost button: OK or Yes button String --
OkText set OK button content for the leftmost button: OK or Yes button, it will override the ConfirmLocale OneOf<String, RenderFragment?? --
CancelText set Cancel button content for the second on the left button: Cancel or NO button, it will override the ConfirmLocale OneOf<String, RenderFragment?? --
OnCancel for OK-Cancel Confirm dialog, cancel button clicked callback. It's only trigger in Confirm created by ModalService mode Func<ModalClosingEventArgs, Task> --
OnOk for OK-Cancel Confirm dialog, OK button clicked callback. It's only trigger in Confirm created by ModalService mode Func<ModalClosingEventArgs, Task> --
OkButtonProps OK-Cancel Confirm dialog's OK button props. It is equivalent to Button1Props. ButtonProps --
CancelButtonProps OK-Cancel Confirm dialog's cancel button props. It is equivalent to Button2Props. ButtonProps --
Button1Props the leftmost button in LTR layout ButtonProps --
Button2Props The second button on the left is in the LTR layout ButtonProps --
Button3Props the rightmost button in LTR layout ButtonProps --
OkCancel show Cancel button for OK-Cancel Confirm dialog Boolean --
PrefixCls class name prefix String --
CancelText modal default footer cancel text OneOf<String, RenderFragment> --
Centered whether center display Boolean --
GetContainer get or set the modal parent DOM ElementReference? --
Keyboard Whether support press esc to close Boolean --
Mask Whether show mask or not Boolean --
MaskClosable Whether to close the modal dialog when the mask (area outside the modal) is clicked Boolean --
MaskStyle Style for dialog's mask element String --
OkText Text of the OK button OneOf<String, RenderFragment> --
Title The modal dialog's title of String String --
TitleTemplate The modal dialog's title of RenderFragment RenderFragment --
Width Width of the modal dialog OneOf<String, Double> --
ZIndex The z-index of the Modal Int32 --
Rtl Is RTL Boolean --

FAQs

Why does the custom component inherited from FeedbackComponent<> not execute the Dispose method when a Modal created by ModalService.CreateModalAsync<> is closed?

Modal will not be removed from DOM by default after closing, so the Dispose method of custom component will not be executed. You can change this default behavior by setting modalOptions.DestroyOnClose=true.

Message Notification
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.