Modal 对话框

模态对话框。

何时使用#

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

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

API#

参数 说明 类型 默认值
visible 对话框是否可见 Boolean 无
confirmLoading 确定按钮 loading Boolean 无
title 标题 React.Element 无
closable 是否显示右上角的关闭按钮 Boolean true
onOk 点击确定回调 function 无
onCancel 点击遮罩层或右上角叉或取消按钮的回调 function(e) 无
width 宽度 String or Number 520
footer 底部内容 React.Element 确定取消按钮
okText 确认按钮文字 String 确定
cancelText 取消按钮文字 String 取消
maskClosable 点击蒙层是否允许关闭 Boolean true
align 浮层自定义位置 Object, dom-align 距离顶部 100px

包括：

  • Modal.info
  • Modal.success
  • Modal.error
  • Modal.confirm

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

参数 说明 类型 默认值
title 标题 React.Element or String 无
content 内容 React.Element or String 无
onOk 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 function 无
onCancel 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 function 无
width 宽度 String or Number 416
iconClassName 图标 Icon 类型 String question-circle
okText 确认按钮文字 String 确定
cancelText 取消按钮文字 String 取消

代码演示 

import { Modal, Button } from 'antd';

const App = React.createClass({
  getInitialState() {
    return { visible: false };
  },
  showModal() {
    this.setState({
      visible: true
    });
  },
  handleOk() {
    console.log('点击了确定');
    this.setState({
      visible: false
    });
  },
  handleCancel(e) {
    console.log(e);
    this.setState({
      visible: false
    });
  },
  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>显示对话框</Button>
        <Modal title="第一个 Modal" visible={this.state.visible}
          onOk={this.handleOk} onCancel={this.handleCancel}>
          <p>对话框的内容</p>
          <p>对话框的内容</p>
          <p>对话框的内容</p>
        </Modal>
      </div>
    );
  }
});

ReactDOM.render(<App />, mountNode);
基本

第一个对话框。

import { Modal, Button } from 'antd';
const confirm = Modal.confirm;

function showConfirm() {
  confirm({
    title: '您是否确认要删除这项内容',
    content: '点确认 1 秒后关闭',
    onOk() {
      return new Promise((resolve) => {
        setTimeout(resolve, 1000);
      });
    },
    onCancel() {}
  });
}

ReactDOM.render(
<Button onClick={showConfirm}>
  确认对话框
</Button>, mountNode);
确认对话框

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

import { Modal, Button } from 'antd';

const LocalizedModal = React.createClass({
  getInitialState() {
    return { visible: false };
  },
  showModal() {
    this.setState({
      visible: true
    });
  },
  handleOk() {
    this.setState({
      visible: false
    });
  },
  handleCancel() {
    this.setState({
      visible: false
    });
  },
  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>Show Modal</Button>
        <Modal title="Modal" visible={this.state.visible}
          onOk={this.handleOk} onCancel={this.handleCancel}
          okText="OK" cancelText="Cancel">
          <p>Bla bla ...</p>
          <p>Bla bla ...</p>
          <p>Bla bla ...</p>
        </Modal>
      </div>
    );
  }
});

function confirm() {
  Modal.confirm({
    title: 'Confirm',
    content: 'Bla bla ...',
    okText: 'OK',
    cancelText: 'Cancel'
  });
}

ReactDOM.render(<div>
  <LocalizedModal />
  <br />
  <Button onClick={confirm}>confirm</Button>
</div>, mountNode);
国际化

设置 okText 与 cancelText 以自定义按钮文字。

import { Modal, Button } from 'antd';

const Test = React.createClass({
  getInitialState() {
    return {
      ModalText: '对话框的内容',
      visible: false
    };
  },
  showModal() {
    this.setState({
      visible: true
    });
  },
  handleOk() {
    this.setState({
      ModalText: '对话框将在两秒后关闭',
      confirmLoading: true
    });
    setTimeout(() => {
      this.setState({
        visible: false,
        confirmLoading: false
      });
    }, 2000);
  },
  handleCancel() {
    console.log('点击了取消');
    this.setState({
      visible: false
    });
  },
  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>显示对话框</Button>
        <Modal title="对话框标题"
          visible={this.state.visible}
          onOk={this.handleOk}
          confirmLoading={this.state.confirmLoading}
          onCancel={this.handleCancel}>
          <p>{this.state.ModalText}</p>
        </Modal>
      </div>
    );
  }
});

ReactDOM.render(<Test />, mountNode);
异步关闭

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

import { Modal, Button } from 'antd';
const confirm = Modal.confirm;

function showConfirm() {
  confirm({
    title: '您是否确认要删除这项内容',
    content: '一些解释',
    onOk() {
      console.log('确定');
    },
    onCancel() {}
  });
}

ReactDOM.render(
<Button onClick={showConfirm}>
  确认对话框
</Button>, mountNode);
确认对话框

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

import { Modal, Button } from 'antd';

function info() {
  Modal.info({
    title: '这是一条通知信息',
    content: (
      <div>
        <p>一些附加信息一些附加信息一些附加信息</p>
        <p>一些附加信息一些附加信息一些附加信息</p>
      </div>
    ),
    onOk() {},
  });
}

function success() {
  Modal.success({
    title: '这是一条通知信息',
    content: '一些附加信息一些附加信息一些附加信息'
  });
}

function error() {
  Modal.error({
    title: '这是一条通知信息',
    content: '一些附加信息一些附加信息一些附加信息'
  });
}

ReactDOM.render(<div>
  <Button onClick={info}>信息提示</Button>
  <Button onClick={success}>成功提示</Button>
  <Button onClick={error}>失败提示</Button>
</div>, mountNode);
信息提示

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