Modal 对话框

模态对话框。

何时使用

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

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

API

参数 说明 类型 默认值
visible 对话框是否可见 Boolean 无
confirmLoading 确定按钮 loading Boolean 无
title 标题 React.Element 无
onOk 点击确定回调 function 无
onCancel 点击遮罩层或右上角叉或取消按钮的回调 function 无
width 宽度 String or Number 520
footer 底部内容 React.Element 确定取消按钮

包括：

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

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

参数 说明 类型 默认值
title 标题 React.Element or String 无
onOk 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 function 无
onCancel 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 function 无
width 宽度 String or Number 416
iconClassName 图标样式名 String anticon-question-circle

组件演示 

var Modal = antd.Modal;

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

React.render(<App /> , document.getElementById('components-modal-demo-basic'));
基本

第一个对话框。

var confirm = antd.Modal.confirm;

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

React.render(
<button className="ant-btn" onClick={showConfirm}>
  确认对话框
</button>, document.getElementById('components-modal-demo-confirm-promise'));
确认对话框

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

var Modal = antd.Modal;
var ModalText = '对话框的内容';

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

React.render(<Test/> , document.getElementById('components-modal-demo-custom'));
异步关闭

点击确定后异步关闭对话框。

var confirm = antd.Modal.confirm;

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

React.render(
<button className="ant-btn" onClick={showConfirm}>
  确认对话框
</button>, document.getElementById('components-modal-demo-confirm'));
确认对话框

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

var Modal = antd.Modal;

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

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

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

React.render(<div>
  <button className="ant-btn" onClick={info}>信息提示</button>
  <button className="ant-btn" onClick={success}>成功提示</button>
  <button className="ant-btn" onClick={error}>失败提示</button>
</div>, document.getElementById('components-modal-demo-info'));
信息提示

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