docs: update docs details for Modal, close: #6121

components/modal/demo/async.md

@@ -19,7 +19,7 @@ import { Modal, Button } from 'antd';
 
 class App extends React.Component {
   state = {
-    ModalText: 'Content of the modal dialog',
+    ModalText: 'Content of the modal',
     visible: false,
   }
   showModal = () => {
@@ -29,7 +29,7 @@ class App extends React.Component {
   }
   handleOk = () => {
     this.setState({
-      ModalText: 'The modal dialog will be closed after two seconds',
+      ModalText: 'The modal will be closed after two seconds',
       confirmLoading: true,
     });
     setTimeout(() => {
@@ -46,16 +46,17 @@ class App extends React.Component {
     });
   }
   render() {
+    const { visible, confirmLoading, ModalText } = this.state;
     return (
       <div>
-        <Button type="primary" onClick={this.showModal}>Open a modal dialog</Button>
+        <Button type="primary" onClick={this.showModal}>Open</Button>
-        <Modal title="Title of the modal dialog"
+        <Modal title="Title"
-          visible={this.state.visible}
+          visible={visible}
           onOk={this.handleOk}
-          confirmLoading={this.state.confirmLoading}
+          confirmLoading={confirmLoading}
           onCancel={this.handleCancel}
         >
-          <p>{this.state.ModalText}</p>
+          <p>{ModalText}</p>
         </Modal>
       </div>
     );

components/modal/demo/basic.md

@@ -11,7 +11,7 @@ title:
 
 ## en-US
 
-Basic modal dialog.
+Basic modal.
 
 ````jsx
 import { Modal, Button } from 'antd';
@@ -38,16 +38,16 @@ class App extends React.Component {
   render() {
     return (
       <div>
-        <Button type="primary" onClick={this.showModal}>Open a modal dialog</Button>
+        <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>
+          <p>Some contents...</p>
-          <p>some contents...</p>
+          <p>Some contents...</p>
         </Modal>
       </div>
     );

components/modal/demo/confirm-promise.md

@@ -20,7 +20,7 @@ const confirm = Modal.confirm;
 
 function showConfirm() {
   confirm({
-    title: 'Want to delete these items?',
+    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) => {
@@ -33,7 +33,7 @@ function showConfirm() {
 
 ReactDOM.render(
   <Button onClick={showConfirm}>
-    Confirmation modal dialog
+    Confirm
   </Button>
 , mountNode);
 ````

components/modal/demo/confirm.md

@@ -19,8 +19,8 @@ const confirm = Modal.confirm;
 
 function showConfirm() {
   confirm({
-    title: 'Want to delete these items?',
+    title: 'Do you Want to delete these items?',
-    content: 'some descriptions',
+    content: 'Some descriptions',
     onOk() {
       console.log('OK');
     },
@@ -32,7 +32,7 @@ function showConfirm() {
 
 ReactDOM.render(
   <Button onClick={showConfirm}>
-    confirmation modal dialog
+    Confirm
   </Button>
 , mountNode);
 ````

components/modal/demo/footer.md

@@ -42,19 +42,20 @@ class App extends React.Component {
     this.setState({ visible: false });
   }
   render() {
+    const { visible, loading } = this.state;
     return (
       <div>
         <Button type="primary" onClick={this.showModal}>
-          Open modal dialog
+          Open
         </Button>
         <Modal
-          visible={this.state.visible}
+          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={this.state.loading} onClick={this.handleOk}>
+            <Button key="submit" type="primary" size="large" loading={loading} onClick={this.handleOk}>
               Submit
             </Button>,
           ]}

components/modal/demo/info.md

@@ -50,10 +50,13 @@ function warning() {
   });
 }
 
-ReactDOM.render(<div>
+ReactDOM.render(
-  <Button onClick={info}>Info</Button>
+  <div>
-  <Button onClick={success}>Success</Button>
+    <Button onClick={info}>Info</Button>
-  <Button onClick={error}>Error</Button>
+    <Button onClick={success}>Success</Button>
-  <Button onClick={warning}>Warning</Button>
+    <Button onClick={error}>Error</Button>
-</div>, mountNode);
+    <Button onClick={warning}>Warning</Button>
+  </div>,
+  mountNode
+);
 ````

components/modal/demo/locale.md

@@ -23,12 +23,7 @@ class LocalizedModal extends React.Component {
       visible: true,
     });
   }
-  handleOk = () => {
+  hideModal = () => {
-    this.setState({
-      visible: false,
-    });
-  }
-  handleCancel = () => {
     this.setState({
       visible: false,
     });
@@ -36,14 +31,14 @@ class LocalizedModal extends React.Component {
   render() {
     return (
       <div>
-        <Button type="primary" onClick={this.showModal}>Show Modal</Button>
+        <Button type="primary" onClick={this.showModal}>Modal</Button>
         <Modal
           title="Modal"
           visible={this.state.visible}
-          onOk={this.handleOk}
+          onOk={this.hideModal}
-          onCancel={this.handleCancel}
+          onCancel={this.hideModal}
-          okText="OK"
+          okText="确认"
-          cancelText="Cancel"
+          cancelText="取消"
         >
           <p>Bla bla ...</p>
           <p>Bla bla ...</p>
@@ -58,14 +53,17 @@ function confirm() {
   Modal.confirm({
     title: 'Confirm',
     content: 'Bla bla ...',
-    okText: 'OK',
+    okText: '确认',
-    cancelText: 'Cancel',
+    cancelText: '取消',
   });
 }
 
-ReactDOM.render(<div>
+ReactDOM.render(
-  <LocalizedModal />
+  <div>
-  <br />
+    <LocalizedModal />
-  <Button onClick={confirm}>confirm</Button>
+    <br />
-</div>, mountNode);
+    <Button onClick={confirm}>Confirm</Button>
+  </div>,
+  mountNode
+);
 ````

components/modal/demo/manual.md

@@ -26,7 +26,8 @@ function success() {
 }
 
 
-ReactDOM.render(<div>
+ReactDOM.render(
-  <Button onClick={success}>Success</Button>
+  <Button onClick={success}>Success</Button>,
-</div>, mountNode);
+  mountNode
+);
 ````

components/modal/index.en-US.md

@@ -11,7 +11,7 @@ Modal dialogs.
 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 `ant.Modal.confirm()`,
+Additionally, if you need show a simple confirmation dialog, you can use `antd.Modal.confirm()`,
 and so on.
 
 ## API
@@ -38,11 +38,11 @@ and so on.
 > 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](https://github.com/ant-design/ant-design/issues/4165) to Modal when visible is changed to `true`, React will treat it as a new component.
 
-> ```
+> ```jsx
 > <Modal key={this.state.newKey} visible={this.state.visible} />
 > ```
 
-### Modal.xxx()
+### Modal.method()
 
 There are five ways to display the information based on the content's nature:
 
@@ -67,6 +67,13 @@ The properties of the object are follows:
 | 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.method`s will return a reference, and then we can close the popup by the reference.
+
+```jsx
+const ref = Modal.info();
+ref.destroy();
+```
+
 <style>
 .code-box-demo .ant-btn {
   margin-right: 8px;

components/modal/index.zh-CN.md

@@ -11,7 +11,7 @@ title: Modal
 
 需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 `Modal` 在当前页面正中打开一个浮层，承载相应的操作。
 
-另外当需要一个简洁的确认框询问用户时，可以使用精心封装好的 `ant.Modal.confirm()` 等方法。
+另外当需要一个简洁的确认框询问用户时，可以使用精心封装好的 `antd.Modal.confirm()` 等方法。
 
 ## API
 
@@ -37,11 +37,11 @@ title: Modal
 > `<Modal />` 组件有标准的 React 生命周期，关闭后状态不会自动清空。
 > 如果希望每次打开都是新内容，需要自行手动清空旧的状态。或者打开时给 Modal 设置一个[全新的 key](https://github.com/ant-design/ant-design/issues/4165)， React 会渲染出一个全新的对话框。
 
-> ```
+> ```jsx
 > <Modal key={this.state.newKey} visible={this.state.visible} />
 > ```
 
-### Modal.xxx()
+### Modal.method()
 
 包括：
 
@@ -65,6 +65,13 @@ title: Modal
 | cancelText | 取消按钮文字    | string           | 取消       |
 | maskClosable | 点击蒙层是否允许关闭 | Boolean   | `false`    |
 
+以上函数调用后，会返回一个引用，可以通过该引用关闭弹窗。
+
+```jsx
+const ref = Modal.info();
+ref.destroy();
+```
+
 <style>
 .code-box-demo .ant-btn {
   margin-right: 8px;