Basic
Asynchronously close
Customized Footer
Confirmation modal dialog
Confirmation modal dialog
Information modal dialog
Internationalization
Manual to destroy
To customize the position of modal

Modal

Modal dialogs.

When To Use#

When requiring users to interact with application, but without jumping to a new page to interrupt the user's workflow, you can use Modal to create a new floating layer over the current page for user getting feedback or information purposes. Additionally, if you need show a simple confirmation dialog, you can use antd.Modal.confirm(), and so on.

Examples

Basic

Basic modal.

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);

Customized Footer

A more complex example which define a customized footer button bar, the dialog will change to loading state after clicking submit button, when the loading is over, the modal dialog will be closed.

You could set footer to null if you don't need default footer buttons.

import { Modal, Button } from 'antd';

class App extends React.Component {
  state = {
    loading: false,
    visible: false,
  }
  showModal = () => {
    this.setState({
      visible: true,
    });
  }
  handleOk = () => {
    this.setState({ loading: true });
    setTimeout(() => {
      this.setState({ loading: false, visible: false });
    }, 3000);
  }
  handleCancel = () => {
    this.setState({ visible: false });
  }
  render() {
    const { visible, loading } = this.state;
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>
          Open
        </Button>
        <Modal
          visible={visible}
          title="Title"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={[
            <Button key="back" size="large" onClick={this.handleCancel}>Return</Button>,
            <Button key="submit" type="primary" size="large" loading={loading} onClick={this.handleOk}>
              Submit
            </Button>,
          ]}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </div>
    );
  }
}

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

Confirmation modal dialog

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

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);

Internationalization

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

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
);

To customize the position of modal

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

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

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

import { Modal, Button } from 'antd';

class App extends React.Component {
  state = {
    ModalText: 'Content of the modal',
    visible: 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);

Confirmation modal dialog

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

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');
    },
  });
}

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

Information modal dialog

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

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
);

Manual to destroy

Manually destroying a modal.

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#

Property	Description	Type	Default
visible	Determine whether a modal dialog is visible or not	boolean	no
confirmLoading	Determine whether to apply loading visual effect for OK button or not	boolean	no
title	The modal dialog's title	string\|ReactNode	no
closable	Determine whether a close (x) button is visible on top right of the modal dialog or not	boolean	true
onOk	Specify a function that will be called when a user clicked OK button	function(e)	no
onCancel	Specify a function that will be called when a user clicked mask, close button on top right or cancel button	function(e)	no
width	Width of a modal dialog	string\|number	520
footer	Footer content, set as `footer={null}` when you don't need default buttons	string\|ReactNode	OK and cancel button
okText	Text of the OK button	string	OK
cancelText	Text of the Cancel button	string	Cancel
maskClosable	Determine whether to close the modal dialog when clicked mask of it.	boolean	true
style	Style of floating layer, typically used at least for adjusting the position.	object	-
wrapClassName	The class name of the container of the modal dialog	string	-
afterClose	Specify a function that will be called when modal is closed completely.	function	-
getContainer	Return the mount node for Modal	(instance): HTMLElement	() => document.body

Destroy on close#

The state of Modal will be preserved at it's component lifecircle. If you wish to open it with brand new state everytime, you need to reset state manually. Or simply give a new key to Modal when visible is changed to true, React will treat it as a new component.
<Modal key={this.state.newKey} visible={this.state.visible} />

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:

Property	Description	Type	Default
title	Title	string\|ReactNode	no
content	Content	string\|ReactNode	no
onOk	Specify a function that will be called when a user clicked 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 closed	function	no
onCancel	Specify a function that will be called when a user clicked 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 closed	function	no
width	Width of dialog	string\|number	416
iconType	Type of Icon component	string	question-circle
okText	Text of OK button	string	OK
cancelText	Text of cancel button	string	Cancel
maskClosable	Determine whether to close the modal dialog when clicked mask of it.	Boolean	`false`

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

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

Components

Modal

When To Use#

Examples

API#

Destroy on close#

Modal.method()#