---
title: Modal 弹窗 (doing)
order: 9
group:
  path: /components
nav: 
  title: 组件
  path: /components
---

## 使用

模态弹窗是一个伴随遮罩（50%#000000）出现的容器，阻断了用户当前的流程，要求用户进行操作或做出选择

### 使用原则
`信息提示弹窗` 和 `确认对话框` 宽度固定，高度随内容自动适配。实际设计中遇到超过三行的文案，建议先考虑精简。
+ **信息提示弹窗：** `Modal.info`、`Modal.success`、`Modal.error`、`Modal.warning` 用于引导用户进行操作或操作后的结果，包括引导提示、警告提示、失败提示、成功提示。
+ **确认对话框：** `Modal.confirm` 用于用户对自己操作的内容进行二次确认。

### 消息提示

默认有取消按钮

```jsx
import React from 'react';
import { Modal, Button } from 'baas-ui';

class BasicNotification extends React.Component {
  constructor() {
    super();
  }

  render() {
    const handleInfo = (e) => {
      Modal.info({
        title: '这是消息模态弹窗',
        content: '段落文字内容段落文字内容段落文字内容段落文字',
        onOk: () => {},
      })
    }
    const handleWarning = (e) => {
      Modal.warning({
        title: '这是警告模态弹窗',
        content: '段落文字内容段落文字内容段落文字内容段落文字',
        onOk: () => {},
      })
    }
    const handleError = (e) => {
      Modal.error({
        title: '这是失败模态弹窗',
        content: '段落文字内容段落文字内容段落文字内容段落文字',
        onOk: () => {},
      })
    }
    const handleSuccess = (e) => {
      Modal.success({
        title: '这是成功模态弹窗',
        content: '段落文字内容段落文字内容段落文字内容段落文字',
        onOk: () => {},
      })
    }
    return (
      <>
        <Button style={{marginRight: 10}} onClick={handleInfo}>消息通知</Button>
        <Button style={{marginRight: 10}} onClick={handleWarning}>警告通知</Button>
        <Button style={{marginRight: 10}} onClick={handleSuccess}>成功通知</Button>
        <Button style={{marginRight: 10}} onClick={handleError}>失败通知</Button>
      </>
    );
  }
}
export default BasicNotification;
```

没有取消按钮的消息提示

```jsx
import React from 'react';
import { Modal, Button } from 'baas-ui';

class BasicModal extends React.Component {
  constructor() {
    super();
  }

  render() {
    const handleInfo = (e) => {
      Modal.info({
        title: '这是消息模态弹窗',
        content: '段落文字内容段落文字内容段落文字内容段落文字',
        showCancelBtn: false,
        onOk: () => {},
      })
    }
    const handleWarning = (e) => {
      Modal.warning({
        title: '这是警告模态弹窗',
        content: '段落文字内容段落文字内容段落文字内容段落文字',
        showCancelBtn: false,
        onOk: () => {},
      })
    }
    const handleError = (e) => {
      Modal.error({
        title: '这是失败模态弹窗',
        content: '段落文字内容段落文字内容段落文字内容段落文字',
        showCancelBtn: false,
        onOk: () => {},
      })
    }
    const handleSuccess = (e) => {
      Modal.success({
        title: '这是成功模态弹窗',
        content: '段落文字内容段落文字内容段落文字内容段落文字',
        showCancelBtn: false,
        onOk: () => {},
      })
    }
    return (
      <>
        <Button style={{marginRight: 10}} onClick={handleInfo}>消息通知</Button>
        <Button style={{marginRight: 10}} onClick={handleWarning}>警告通知</Button>
        <Button style={{marginRight: 10}} onClick={handleSuccess}>成功通知</Button>
        <Button style={{marginRight: 10}} onClick={handleError}>失败通知</Button>
      </>
    );
  }
}
export default BasicModal;
```

### 确认对话框

```jsx
import React from 'react';
import { Modal, Button } from 'baas-ui';

const { confirm } = Modal;

class BasicConfirm extends React.Component {
  constructor() {
    super();
  }

  render() {
    const handleConfirm = (e) => {
      confirm({
        title: '确定删除该项目吗？',
        content: '段落文字内容段落文字内容段落文字内容段落文字',
        onOk: () => {},
        onCancel: () => {},
      })
    }
    return (
      <Button onClick={handleConfirm}>确认弹窗</Button>
    );
  }
}
export default BasicConfirm;
```

### 普通模态框
```jsx
import React from 'react';
import { Modal, Button } from 'baas-ui';

class BasicModal extends React.Component {
  constructor() {
    super();
    this.state = {
      visible: false,
    };
  }

  render() {
    const { visible } = this.state;
    const handleShow = (e) => {
      this.setState({ visible: true });
    };
    const handleClose = () => {
      this.setState({ visible: false });
    };
    return (
      <>
        <Button onClick={handleShow}>新建合约</Button>
        <Modal
          visible={visible}
          title="新建合约"
          okText="确定"
          cancelText="取消"
          onCancel={handleClose}
        >
          BalaBala...
        </Modal>
      </>
    );
  }
}
export default BasicModal;
```

### 等待加载对话框
```jsx
import React from 'react';
import { Modal, Button } from 'baas-ui';

const { waiting } = Modal;

class BasicWaiting extends React.Component {
  constructor() {
    super();
  }

  render() {
    const handleWaiting = (e) => {
      waiting({
        content: '部署时间预计1分钟以内，请耐心等待',
        onOk: () => {},
        onCancel: () => {},
      })
    }
    return (
      <Button onClick={handleWaiting}>等待加载弹窗</Button>
    );
  }
}
export default BasicWaiting;
```

## API

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| afterClose | Modal 完全关闭后的回调 | function | - |
| bodyStyle | Modal body 样式 | object | {} |
| cancelText | 取消按钮文字 | string\|ReactNode | 取消 |
| centered | 垂直居中展示 Modal | Boolean | `false` |
| closable | 是否显示右上角的关闭按钮 | boolean | true |
| closeIcon | 自定义关闭图标 | ReactNode | - |
| confirmLoading | 确定按钮 loading | boolean | - |
| destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false |
| footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer={null}` | string\|ReactNode | 确定取消按钮 |
| forceRender | 强制渲染 Modal | boolean | false |
| getContainer | 指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| `() => HTMLElement` \| Selectors \| false | document.body |
| keyboard | 是否支持键盘 esc 关闭 | boolean | true |
| mask | 是否展示遮罩 | Boolean | true |
| maskClosable | 点击蒙层是否允许关闭 | boolean | true |
| maskStyle | 遮罩样式 | object | {} |
| okText | 确认按钮文字 | string\|ReactNode | 确定 |
| okType | 确认按钮类型 | string | primary |
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button) | - |
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button) | - |
| 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) | - |

#### 注意

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

### Modal.method()

包括：

- `Modal.confirm`
- `Modal.info`
- `Modal.success`
- `Modal.error`
- `Modal.warning`

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

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| showCancelBtn | ***自定义参数***，设置取消按钮是否可见 | boolean | true |
| autoFocusButton | 指定自动获得焦点的按钮 | null\| `ok` \| `cancel` | `ok` |
| cancelText | 设置 Modal.confirm 取消按钮文字 | string | 取消 |
| centered | 垂直居中展示 Modal | Boolean | `false` |
| className | 容器类名 | string | - |
| content | 内容 | string\|ReactNode | - |
| icon | 自定义图标（3.12.0 新增） | ReactNode | `<QuestionCircle />` |
| maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` |
| okText | 确认按钮文字 | string | 确定 |
| okType | 确认按钮类型 | string | primary |
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button) | - |
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button) | - |
| title | 标题 | string\|ReactNode | - |
| width | 宽度 | string\|number | 416 |
| zIndex | 设置 Modal 的 `z-index` | Number | 1000 |
| onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | - |
| onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | - |