• Modal 对话框

    模态对话框。

    何时使用

    需要用户处理事务,又不希望跳转页面以致打断工作流程时,可以使用 Modal 在当前页面正中打开一个浮层,承载相应的操作。

    另外当需要一个简洁的确认框询问用户时,可以使用精心封装好的 antd.Modal.confirm() 等方法。

    代码演示

    第一个对话框。

    更复杂的例子,自定义了页脚的按钮,点击提交后进入 loading 状态,完成后关闭。

    不需要默认确定取消按钮时,你可以把 footer 设为 null

    使用 confirm() 可以快捷地弹出确认框。onCancel/onOk 返回 promise 可以延迟关闭

    设置 okTextcancelText 以自定义按钮文字。

    1.0 之后,Modal 的 align 属性被移除,您可以直接使用 style.top 或配合其他样式来设置对话框位置。

    点击确定后异步关闭对话框,例如提交表单。

    使用 confirm() 可以快捷地弹出确认框。

    各种类型的信息提示,只提供一个按钮用于关闭。

    手动关闭modal。

    侧边弹出。

    API

    参数 说明 类型 默认值
    afterClose Modal 完全关闭后的回调 function
    bodyStyle Modal body 样式 object {}
    cancelText 取消按钮文字 string 取消
    closable 是否显示右上角的关闭按钮 boolean true
    confirmLoading 确定按钮 loading boolean
    destroyOnClose 关闭时销毁 Modal 里的子元素 boolean false
    footer 底部内容,当不需要默认底部按钮时,可以设为 footer={null} string|ReactNode 确定取消按钮
    getContainer 指定 Modal 挂载的 HTML 节点 (instance): HTMLElement () => document.body
    mask 是否展示遮罩 Boolean true
    maskClosable 点击蒙层是否允许关闭 boolean true
    maskStyle 遮罩样式 object {}
    okText 确认按钮文字 string 确定
    okType 确认按钮类型 string primary
    style 可用于设置浮层的样式,调整浮层位置等 object -
    title 标题 string|ReactNode
    visible 对话框是否可见 boolean
    width 宽度 string|number 520
    wrapClassName 对话框外层容器的类名 string -
    zIndex 设置 Modal 的 z-index Number 1000
    onCancel 点击遮罩层或右上角叉或取消按钮的回调 function(e)
    onOk 点击确定回调 function(e)
    funcType 按钮功能 string

    注意

    <Modal /> 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容,请设置 destroyOnClose

    侧边栏弹出窗,API同Modal

    包括:

    以上均为一个函数,参数为 object,具体属性如下:

    参数 说明 类型 默认值
    cancelText 取消按钮文字 string 取消
    className 容器类名 string -
    content 内容 string|ReactNode
    iconType 图标 Icon 类型 string question-circle
    maskClosable 点击蒙层是否允许关闭 Boolean false
    okText 确认按钮文字 string 确定
    okType 确认按钮类型 string primary
    title 标题 string|ReactNode
    width 宽度 string|number 416
    zIndex 设置 Modal 的 z-index Number 1000
    onCancel 取消回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 function
    onOk 点击确定回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 function

    以上函数调用后,会返回一个引用,可以通过该引用关闭弹窗。

    const ref = Modal.info();
    ref.destroy();