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 antd.Modal.confirm(), and so on.

Examples

Basic modal.

expand codeexpand code
import { Modal, Button } from 'antd';

class App extends React.Component {
  state = { visible: false }
  showModal = () => {
    this.setState({
      visible: true,
    });
  }
  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }
  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }
  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>Open</Button>
        <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </div>
    );
  }
}

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

To use confirm() to popup confirmation modal dialog. Let onCancel/onOk function return a promise object to delay closing the dialog.

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

function showConfirm() {
  confirm({
    title: 'Do you want to delete these items?',
    content: 'When clicked the OK button, this dialog will be closed after 1 second',
    onOk() {
      return new Promise((resolve, reject) => {
        setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
      }).catch(() => console.log('Oops errors!'));
    },
    onCancel() {},
  });
}

ReactDOM.render(
  <Button onClick={showConfirm}>
    Confirm
  </Button>
, mountNode);

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

expand codeexpand code
import { Modal, Button } from 'antd';

class LocalizedModal extends React.Component {
  state = { visible: false }
  showModal = () => {
    this.setState({
      visible: true,
    });
  }
  hideModal = () => {
    this.setState({
      visible: false,
    });
  }
  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>Modal</Button>
        <Modal
          title="Modal"
          visible={this.state.visible}
          onOk={this.hideModal}
          onCancel={this.hideModal}
          okText="确认"
          cancelText="取消"
        >
          <p>Bla bla ...</p>
          <p>Bla bla ...</p>
          <p>Bla bla ...</p>
        </Modal>
      </div>
    );
  }
}

function confirm() {
  Modal.confirm({
    title: 'Confirm',
    content: 'Bla bla ...',
    okText: '确认',
    cancelText: '取消',
  });
}

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


After release 1.0, Modal's align prop was removed. You can use style.top or other styles to set position of modal dialog.

expand codeexpand code
import { Modal, Button } from 'antd';

class App extends React.Component {
  state = {
    modal1Visible: false,
    modal2Visible: false,
  }
  setModal1Visible(modal1Visible) {
    this.setState({ modal1Visible });
  }
  setModal2Visible(modal2Visible) {
    this.setState({ modal2Visible });
  }
  render() {
    return (
      <div>
        <Button type="primary" onClick={() => this.setModal1Visible(true)}>Display a modal dialog at 20px to Top</Button>
        <Modal
          title="20px to Top"
          style={{ top: 20 }}
          visible={this.state.modal1Visible}
          onOk={() => this.setModal1Visible(false)}
          onCancel={() => this.setModal1Visible(false)}
        >
          <p>some contents...</p>
          <p>some contents...</p>
          <p>some contents...</p>
        </Modal>
        <br /><br />
        <Button type="primary" onClick={() => this.setModal2Visible(true)}>Vertically centered modal dialog</Button>
        <Modal
          title="Vertically centered modal dialog"
          wrapClassName="vertical-center-modal"
          visible={this.state.modal2Visible}
          onOk={() => this.setModal2Visible(false)}
          onCancel={() => this.setModal2Visible(false)}
        >
          <p>some contents...</p>
          <p>some contents...</p>
          <p>some contents...</p>
        </Modal>
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);
/* use css to set position of modal */
.vertical-center-modal {
  text-align: center;
  white-space: nowrap;
}

.vertical-center-modal:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
}

.vertical-center-modal .ant-modal {
  display: inline-block;
  vertical-align: middle;
  top: 0;
  text-align: left;
}

/*
// Use flex which not working in IE
.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vertical-center-modal .ant-modal {
  top: 0;
}
*/

Asynchronously close a modal dialog when a user clicked OK button, for example, you can use this pattern when you submit a form.

expand codeexpand code
import { Modal, Button } from 'antd';

class App extends React.Component {
  state = {
    ModalText: 'Content of the modal',
    visible: false,
    confirmLoading: false,
  }
  showModal = () => {
    this.setState({
      visible: true,
    });
  }
  handleOk = () => {
    this.setState({
      ModalText: 'The modal will be closed after two seconds',
      confirmLoading: true,
    });
    setTimeout(() => {
      this.setState({
        visible: false,
        confirmLoading: false,
      });
    }, 2000);
  }
  handleCancel = () => {
    console.log('Clicked cancel button');
    this.setState({
      visible: false,
    });
  }
  render() {
    const { visible, confirmLoading, ModalText } = this.state;
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>Open</Button>
        <Modal title="Title"
          visible={visible}
          onOk={this.handleOk}
          confirmLoading={confirmLoading}
          onCancel={this.handleCancel}
        >
          <p>{ModalText}</p>
        </Modal>
      </div>
    );
  }
}

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

To use confirm() to popup a confirmation modal dialog.

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

function showConfirm() {
  confirm({
    title: 'Do you Want to delete these items?',
    content: 'Some descriptions',
    onOk() {
      console.log('OK');
    },
    onCancel() {
      console.log('Cancel');
    },
  });
}

function showDeleteConfirm() {
  confirm({
    title: 'Are you sure delete this task?',
    content: 'Some descriptions',
    okText: 'Yes',
    okType: 'danger',
    cancelText: 'No',
    onOk() {
      console.log('OK');
    },
    onCancel() {
      console.log('Cancel');
    },
  });
}

ReactDOM.render(
  <div>
    <Button onClick={showConfirm}>
      Confirm
    </Button>
    <Button onClick={showDeleteConfirm} type="dashed">
      Delete
    </Button>
  </div>
, mountNode);

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

expand codeexpand code
import { Modal, Button } from 'antd';

function info() {
  Modal.info({
    title: 'This is a notification message',
    content: (
      <div>
        <p>some messages...some messages...</p>
        <p>some messages...some messages...</p>
      </div>
    ),
    onOk() {},
  });
}

function success() {
  Modal.success({
    title: 'This is a success message',
    content: 'some messages...some messages...',
  });
}

function error() {
  Modal.error({
    title: 'This is an error message',
    content: 'some messages...some messages...',
  });
}

function warning() {
  Modal.warning({
    title: 'This is a warning message',
    content: 'some messages...some messages...',
  });
}

ReactDOM.render(
  <div>
    <Button onClick={info}>Info</Button>
    <Button onClick={success}>Success</Button>
    <Button onClick={error}>Error</Button>
    <Button onClick={warning}>Warning</Button>
  </div>,
  mountNode
);

Manually destroying a modal.

expand codeexpand code
import { Modal, Button } from 'antd';

function success() {
  const modal = Modal.success({
    title: 'This is a notification message',
    content: 'This modal will be destroyed after 1 second',
  });
  setTimeout(() => modal.destroy(), 1000);
}


ReactDOM.render(
  <Button onClick={success}>Success</Button>,
  mountNode
);

API#

PropertyDescriptionTypeDefault
afterCloseSpecify a function that will be called when modal is closed completely.function-
bodyStyleBody style for modal body element. Such as height, padding etc.object{}
cancelTextText of the Cancel buttonstringCancel
closableWhether a close (x) button is visible on top right of the modal dialog or notbooleantrue
confirmLoadingWhether to apply loading visual effect for OK button or notbooleanfalse
footerFooter content, set as footer={null} when you don't need default buttonsstring|ReactNodeOK and Cancel buttons
getContainerReturn the mount node for Modal(instance): HTMLElement() => document.body
maskWhether show mask or not.Booleantrue
maskClosableWhether to close the modal dialog when the mask (area outside the modal) is clickedbooleantrue
maskStyleStyle for modal's mask element.object{}
okTextText of the OK buttonstringOK
okTypeButton type of the OK buttonstringprimary
styleStyle of floating layer, typically used at least for adjusting the position.object-
titleThe modal dialog's titlestring|ReactNode-
visibleWhether the modal dialog is visible or notbooleanfalse
widthWidth of the modal dialogstring|number520
wrapClassNameThe class name of the container of the modal dialogstring-
zIndexThe z-index of the ModalNumber1000
onCancelSpecify a function that will be called when a user clicks mask, close button on top right or Cancel buttonfunction(e)-
onOkSpecify a function that will be called when a user clicks the OK buttonfunction(e)-

Destroy on close#

The state of Modal will be preserved at it's component lifecycle. If you wish to open it with a brand new state everytime, you need to reset state manually.

Modal.method()#

There are five ways to display the information based on the content's nature:

  • Modal.info

  • Modal.success

  • Modal.error

  • Modal.warning

  • Modal.confirm

The items listed above are all functions, expecting a settings object as parameter. The properties of the object are follows:

PropertyDescriptionTypeDefault
cancelTextText of the Cancel buttonstringCancel
contentContentstring|ReactNode-
iconTypeIcon type of the Icon componentstringquestion-circle
maskClosableWhether to close the modal dialog when the mask (area outside the modal) is clickedBooleanfalse
okTextText of the OK buttonstringOK
okTypeButton type of the OK buttonstringprimary
titleTitlestring|ReactNode-
widthWidth of the modal dialogstring|number416
zIndexThe z-index of the ModalNumber1000
onCancelSpecify a function that will be called when the user clicks the Cancel button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closedfunction-
onOkSpecify a function that will be called when the user clicks the OK button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closedfunction-

All the Modal.methods will return a reference, and then we can close the modal dialog by the reference.

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