Basic
Asynchronously close
Customized Footer
Confirmation modal dialog
Confirmation modal dialog
Information modal dialog
Internationalization
Manual to update destroy
To customize the position of modal
destroy confirmation modal dialog
Customize footer buttons props

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

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 Modal
        </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 Modal with customized footer
        </Button>
        <Modal
          visible={visible}
          title="Title"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={[
            <Button key="back" onClick={this.handleCancel}>Return</Button>,
            <Button key="submit" type="primary" 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

You can use centered,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"
          centered
          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);

Customize footer buttons props

Passing okButtonProps and cancelButtonProps can customize the ok button and cancel button props.

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 Modal with customized button props
        </Button>
        <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          okButtonProps={{ disabled: true }}
          cancelButtonProps={{ disabled: true }}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </div>
    );
  }
}

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

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,
    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 Modal with async logic
        </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');
    },
  });
}

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

function showPropsConfirm() {
  confirm({
    title: 'Are you sure delete this task?',
    content: 'Some descriptions',
    okText: 'Yes',
    okType: 'danger',
    okButtonProps: {
      disabled: true,
    },
    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>
    <Button onClick={showPropsConfirm} type="dashed">
      With extra props
    </Button>
  </div>,
  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 update destroy

Manually updateing and destroying a modal from Modal.method.

import { Modal, Button } from 'antd';

function countDown() {
  let secondsToGo = 5;
  const modal = Modal.success({
    title: 'This is a notification message',
    content: `This modal will be destroyed after ${secondsToGo} second.`,
  });
  const timer = setInterval(() => {
    secondsToGo -= 1;
    modal.update({
      content: `This modal will be destroyed after ${secondsToGo} second.`,
    });
  }, 1000);
  setTimeout(() => {
    clearInterval(timer);
    modal.destroy();
  }, secondsToGo * 1000);
}

ReactDOM.render(
  <Button onClick={countDown}>Open modal to close in 5s</Button>,
  mountNode
);

destroy confirmation modal dialog

Modal.destroyAll() could destroy all confirmation modal dialogs. Usually, you can use it in router change event to destroy confirm modal dialog automatically

import { Modal, Button } from 'antd';

function destroyAll() {
  Modal.destroyAll();
}

const confirm = Modal.confirm;

function showConfirm() {
  for (let i = 0; i < 3; i += 1) {
    setTimeout(() => {
      confirm({
        content: (
          <Button onClick={destroyAll}>
            Click to destroy all
          </Button>
        ),
        onOk() {
          console.log('OK');
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    }, i * 500);
  }
}

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

API#

Property	Description	Type	Default
afterClose	Specify a function that will be called when modal is closed completely.	function	-
bodyStyle	Body style for modal body element. Such as height, padding etc.	object	{}
cancelText	Text of the Cancel button	string\|ReactNode	`Cancel`
centered	Centered Modal	Boolean	`false`
closable	Whether a close (x) button is visible on top right of the modal dialog or not	boolean	true
confirmLoading	Whether to apply loading visual effect for OK button or not	boolean	false
destroyOnClose	Whether to unmount child components on onClose	boolean	false
footer	Footer content, set as `footer={null}` when you don't need default buttons	string\|ReactNode	OK and Cancel buttons
forceRender	Force render Modal	boolean	false
getContainer	Return the mount node for Modal	(instance): HTMLElement	() => document.body
mask	Whether show mask or not.	Boolean	true
maskClosable	Whether to close the modal dialog when the mask (area outside the modal) is clicked	boolean	true
maskStyle	Style for modal's mask element.	object	{}
okText	Text of the OK button	string\|ReactNode	`OK`
okType	Button `type` of the OK button	string	`primary`
okButtonProps	The ok button props	ButtonProps	-
cancelButtonProps	The cancel button props	ButtonProps	-
style	Style of floating layer, typically used at least for adjusting the position.	object	-
title	The modal dialog's title	string\|ReactNode	-
visible	Whether the modal dialog is visible or not	boolean	false
width	Width of the modal dialog	string\|number	520
wrapClassName	The class name of the container of the modal dialog	string	-
zIndex	The `z-index` of the Modal	Number	1000
onCancel	Specify a function that will be called when a user clicks mask, close button on top right or Cancel button	function(e)	-
onOk	Specify a function that will be called when a user clicks the OK button	function(e)	-

Note#

The state of Modal will be preserved at it's component lifecycle by default, if you wish to open it with a brand new state everytime, set destroyOnClose on it.

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
autoFocusButton	Specify which button to autofocus	null\|string: `ok` `cancel`	`ok`
cancelText	Text of the Cancel button	string	`Cancel`
centered	Centered Modal	Boolean	`false`
className	className of container	string	-
content	Content	string\|ReactNode	-
icon	custom icon (`Added in 3.12.0`)	string\|ReactNode	`<Icon type="question-circle">`
iconType	Icon `type` of the Icon component (deperated after `3.12.0`)	string	`question-circle`
keyboard	Whether support press esc to close	Boolean	true
mask	Whether show mask or not.	Boolean	true
maskClosable	Whether to close the modal dialog when the mask (area outside the modal) is clicked	Boolean	`false`
okText	Text of the OK button	string	`OK`
okType	Button `type` of the OK button	string	`primary`
okButtonProps	The ok button props	ButtonProps	-
cancelButtonProps	The cancel button props	ButtonProps	-
title	Title	string\|ReactNode	-
width	Width of the modal dialog	string\|number	416
zIndex	The `z-index` of the Modal	Number	1000
onCancel	Specify 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 closed	function	-
onOk	Specify 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 closed	function	-

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

const modal = Modal.info();

modal.update({
  title: 'Updated title',
  content: 'Updated content',
});

modal.destroy();

Modal.destroyAll

Modal.destroyAll() could destroy all confirmation modal dialogs(Modal.info/Modal.success/Modal.error/Modal.warning/Modal.confirm). Usually, you can use it in router change event to destroy confirm modal dialog automatically without use modal reference to close( it's too complex to use for all modal dialogs)

import { browserHistory } from 'react-router';

// router change
browserHistory.listen(() => {
  Modal.destroyAll();
});

Components

Modal

When To Use#

Examples

API#

Note#

Modal.method()#