diff --git a/docs/modal/api.md b/docs/modal/api.md
index 8d7dde4..46a6eab 100644
--- a/docs/modal/api.md
+++ b/docs/modal/api.md
@@ -17,6 +17,12 @@ Modal 组件，用于弹出内容，实现 alert、confirm、prompt、loading、
 
 Modal 形式，不设置时为普通的模态窗口。
 
+##### `isOpen`
+
+> PropType: `bool`
+
+Modal 是否为打开状态。
+
 ##### `title`
 
 > PropType: `node`
@@ -53,6 +59,8 @@ Modal 标题。
 
 用户点击「确定」或「取消」按钮时的处理函数。
 
+`role` 为 `prompt` 时，通过该函数的返回值可以控制按钮点击时是否关闭 Modal。
+
 ##### `onOpen`
 
 > PropType: `func`
@@ -65,10 +73,18 @@ Modal 打开时的回调函数。
 
 Modal 关闭以后的回调函数。
 
+##### `onRequestClose`
+
+> PropType: `func`
+
+用户请求关闭操作时的处理函数。
+
 
 #### 方法
 
-调用方式见示例代码。
+~~调用方式见示例代码。~~
+
+**Modal 实现方式调整，请勿直接调用其方法。**
 
 ##### `.open()`
 
diff --git a/kitchen-sink/pages/ModalExample.js b/kitchen-sink/pages/ModalExample.js
index b2017b3..fd930cb 100644
--- a/kitchen-sink/pages/ModalExample.js
+++ b/kitchen-sink/pages/ModalExample.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import {
   Container,
   Group,
@@ -9,40 +10,81 @@ import {
 } from 'amazeui-touch';
 
 const ModalExample = React.createClass({
-  open() {
-    this.refs.modal.open();
+  getInitialState() {
+    return {
+      isModalOpen: false,
+    };
   },
 
-  close() {
-    this.refs.modal.close();
+  openModal() {
+    this.setState({
+      isModalOpen: true,
+    })
+  },
+
+  closeModal() {
+    this.setState({
+      isModalOpen: false,
+    });
+  },
+
+  onOpen() {
+    console.log('modal open....');
+  },
+
+  onClosed() {
+    console.log('modal closed....');
   },
 
   handleAction(data) {
-    let role = this.refs.modal.props.role;
+    let role = this.getModalRole();
 
     // 确定和取消放在一起处理
     // data 为 true 时为 `确定`
     if (role === 'confirm') {
-      console.log('你的选择是：「' + (data ? '确定' : '取消')  + '」')
+      console.log('你的选择是：「' + (data ? '确定' : '取消') + '」')
     } else if (role === 'prompt') {
+      // `prompt` 类型支持通过返回值控制是否关闭 Modal
+
+      // 点击取消时 data 的值为 null
+
+      // 简单的验证逻辑
+      // 仅适用于一个输入框的场景，多个输入框的 data 值为 `['', '', ...]`
+      if (data === '') {
+        console.error('赶紧交出来啊，不然...你懂的...');
+        return false; // 点击确定时不关闭 Modal
+      }
+
       console.log('输入的数据是：', data);
+      return true; // 点击确定时关闭 Modal
     }
   },
 
+  getModalRole() {
+    return this.props.modalProps.role;
+  },
+
   render() {
     return (
       <div>
         <Button
           amStyle='primary'
-          onClick={this.open}
+          onClick={this.openModal}
         >
           {this.props.title}
         </Button>
-
-        {React.cloneElement(React.Children.only(this.props.children), {
-          ref: 'modal',
-          onAction: this.handleAction
-        })}
+        <Modal
+          ref="modal"
+          isOpen={this.state.isModalOpen}
+          onRequestClose={this.closeModal}
+          onOpen={this.onOpen}
+          onClosed={this.onClosed}
+          onBeforeConfirm={this.onBeforeConfirm}
+          onAction={this.handleAction}
+          {...this.props.modalProps}
+        >
+          {this.getModalRole() !== 'loading' && this.props.children}
+        </Modal>
       </div>
     );
   }
@@ -55,12 +97,13 @@ const ModalExamples = React.createClass({
         <Group
           header="默认 Modal"
         >
-          <ModalExample title="普通 Modal">
-            <Modal
-              title="Modal 标题"
-            >
-              Modal 内容
-            </Modal>
+          <ModalExample
+            title="普通 Modal"
+            modalProps={{
+              title: 'Modal 标题',
+            }}
+          >
+            Hello, Modal 内容
           </ModalExample>
         </Group>
 
@@ -69,28 +112,25 @@ const ModalExamples = React.createClass({
         >
           <ModalExample
             title="Alert Modal"
+            modalProps={{
+              role: 'alert',
+              title: 'Amaze UI',
+            }}
           >
-            <Modal
-              role="alert"
-              title="Amaze UI"
-            >
-              这一个 Alert 窗口。
-            </Modal>
+            这一个 Alert 窗口。
           </ModalExample>
         </Group>
-
         <Group
           header="Confirm"
         >
           <ModalExample
             title="Confirm Modal"
+            modalProps={{
+              role: 'confirm',
+              title: 'Amaze UI',
+            }}
           >
-            <Modal
-              role="confirm"
-              title="Amaze UI"
-            >
-              这一个 Confirm 窗口。
-            </Modal>
+            这一个 Confirm 窗口。
           </ModalExample>
         </Group>
 
@@ -99,14 +139,13 @@ const ModalExamples = React.createClass({
         >
           <ModalExample
             title="Prompt Modal"
+            modalProps={{
+              role: 'prompt',
+              title: 'Amaze UI',
+            }}
           >
-            <Modal
-              role="prompt"
-              title="Amaze UI"
-            >
-              输入你的 IQ 卡密码：
-              <Field placeholder="把 IQ 卡密码交出来" />
-            </Modal>
+            输入你的 IQ 卡密码：
+            <Field placeholder="把 IQ 卡密码交出来" />
           </ModalExample>
         </Group>
 
@@ -115,16 +154,15 @@ const ModalExamples = React.createClass({
         >
           <ModalExample
             title="Prompt Modal"
+            modalProps={{
+              role: 'prompt',
+              title: 'Login',
+            }}
           >
-            <Modal
-              role="prompt"
-              title="Login"
-            >
-              <div className="form-set">
-                <Field placeholder="Name." />
-                <Field placeholder="Password." />
-              </div>
-            </Modal>
+            <div className="form-set">
+              <Field placeholder="Name." />
+              <Field placeholder="Password." />
+            </div>
           </ModalExample>
         </Group>
 
@@ -133,12 +171,11 @@ const ModalExamples = React.createClass({
         >
           <ModalExample
             title="Loading Modal"
-          >
-            <Modal
-              title="使劲加载中..."
-              role="loading"
-            />
-          </ModalExample>
+            modalProps={{
+              title: '使劲加载中...',
+              role: 'loading'
+            }}
+          />
         </Group>
 
         <Group
@@ -146,28 +183,34 @@ const ModalExamples = React.createClass({
         >
           <ModalExample
             title="Actions Modal"
+            modalProps={{
+              role: 'actions'
+            }}
           >
-            <Modal
-              role="actions"
-            >
-              <div className="modal-actions-group">
-                <List>
-                  <List.Item className="modal-actions-header">分享到</List.Item>
-                  <List.Item>微信</List.Item>
-                  <List.Item className="modal-actions-alert"> Twitter</List.Item>
-                </List>
-              </div>
-            </Modal>
+            <div className="modal-actions-group">
+              <List>
+                <List.Item className="modal-actions-header">分享到</List.Item>
+                <List.Item>微信</List.Item>
+                <List.Item className="modal-actions-alert">
+                  Twitter</List.Item>
+              </List>
+            </div>
           </ModalExample>
         </Group>
 
         <Group
           header="Popup"
         >
-          <ModalExample title="Popup Modal">
-            <Modal role="popup" title="爱过什么女爵的滋味">
-              <p>为你封了国境<br/>为你赦了罪<br/>为你撤了历史记载<br/>为你涂了装扮<br/>为你喝了醉<br/>为你建了城池围墙<br/>一颗热的心穿着冰冷外衣<br/>一张白的脸漆上多少褪色的情节<br/>在我的空虚身体里面<br/>爱上哪个肤浅的王位<br/>在你的空虚宝座里面<br/>爱过什麽女爵的滋味<br/>为你封了国境</p><p>为你赦了罪<br/>为你撤了历史记载<br/>一颗热的心<br/>穿着冰冷外衣<br/>一张白的脸<br/>漆上多少褪色的情节<br/>在我的空虚身体里面<br/>爱上哪个肤浅的王位<br/>在你的空虚宝座里面<br/>爱过什麽女爵的滋味<br/>在我的空虚身体里面<br/>爱上哪个肤浅的王位<br/>在你的空虚宝座里面<br/>爱过什麽女爵的滋味</p>
-            </Modal>
+          <ModalExample
+            title="Popup Modal"
+            modalProps={{
+              role: 'popup',
+              title: '爱过什么女爵的滋味',
+            }}
+          >
+            <p>为你封了国境<br />为你赦了罪<br />为你撤了历史记载<br />为你涂了装扮<br />为你喝了醉<br />为你建了城池围墙<br />一颗热的心穿着冰冷外衣<br />一张白的脸漆上多少褪色的情节<br />在我的空虚身体里面<br />爱上哪个肤浅的王位<br />在你的空虚宝座里面<br />爱过什麽女爵的滋味<br />为你封了国境
+            </p><p>为你赦了罪<br />为你撤了历史记载<br />一颗热的心<br />穿着冰冷外衣<br />一张白的脸<br />漆上多少褪色的情节<br />在我的空虚身体里面<br />爱上哪个肤浅的王位<br />在你的空虚宝座里面<br />爱过什麽女爵的滋味<br />在我的空虚身体里面<br />爱上哪个肤浅的王位<br />在你的空虚宝座里面<br />爱过什麽女爵的滋味
+          </p>
           </ModalExample>
         </Group>
       </Container>
diff --git a/src/js/index.js b/src/js/index.js
index 7ff15b2..8b287ec 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -21,7 +21,7 @@ export {default as Icon} from './Icon';
 export {default as Field} from './Field';
 export {default as List} from './List';
 export {default as Loader} from './Loader';
-export {default as Modal} from './Modal';
+export {default as Modal} from './modal';
 export {default as NavBar} from './NavBar';
 export {default as Notification} from './Notification';
 export {default as OffCanvas} from './OffCanvas';
diff --git a/src/js/Modal.js b/src/js/modal/Modal.js
similarity index 80%
rename from src/js/Modal.js
rename to src/js/modal/Modal.js
index deb1fa0..a83710b 100644
--- a/src/js/Modal.js
+++ b/src/js/modal/Modal.js
@@ -2,36 +2,41 @@
  * @see https://github.com/yuanyan/boron
  */
 
-import React from 'react';
+import React, {
+  PropTypes,
+  createClass,
+} from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import CSSTransitionGroup from 'react-addons-css-transition-group';
-import ClassNameMixin from './mixins/ClassNameMixin';
-import CSSCore from './utils/CSSCore';
-import Events from './utils/Events';
-import TransitionEvents from './utils/TransitionEvents';
-import Button from './Button';
-import Icon from './Icon';
-import Loader from './Loader';
+import ClassNameMixin from '../mixins/ClassNameMixin';
+import TransitionEvents from '../utils/TransitionEvents';
+import Button from '../Button';
+import Icon from '../Icon';
+import Loader from '../Loader';
 
 // MUST be equal to $modal-duration in _modal.scss
 const TRANSITION_TIMEOUT = 300;
 
-const Modal = React.createClass({
+function noop() {
+}
+
+const Modal = createClass({
   mixins: [ClassNameMixin],
 
   propTypes: {
-    classPrefix: React.PropTypes.string,
-    role: React.PropTypes.oneOf(['alert', 'confirm', 'prompt', 'loading',
+    classPrefix: PropTypes.string,
+    role: PropTypes.oneOf(['alert', 'confirm', 'prompt', 'loading',
       'actions', 'popup']),
-    title: React.PropTypes.node,
-    confirmText: React.PropTypes.string,
-    cancelText: React.PropTypes.string,
-    closeBtn: React.PropTypes.bool,
-    closeViaBackdrop: React.PropTypes.bool,
-    onAction: React.PropTypes.func,
-    onOpen: React.PropTypes.func,
-    onClosed: React.PropTypes.func,
+    title: PropTypes.node,
+    confirmText: PropTypes.string,
+    cancelText: PropTypes.string,
+    closeBtn: PropTypes.bool,
+    closeViaBackdrop: PropTypes.bool,
+    onAction: PropTypes.func,
+    onOpen: PropTypes.func,
+    onClosed: PropTypes.func,
+    onRequestClose: PropTypes.func,
   },
 
   getDefaultProps() {
@@ -40,12 +45,10 @@ const Modal = React.createClass({
       confirmText: '确定',
       cancelText: '取消',
       closeBtn: true,
-      onAction: () => {
-      },
-      onOpen: () => {
-      },
-      onClosed: () => {
-      },
+      onAction: noop,
+      onOpen: noop,
+      onClosed: noop,
+      onRequestClose: noop,
     };
   },
 
@@ -56,16 +59,24 @@ const Modal = React.createClass({
     };
   },
 
-  isClosed() {
-    return this.state.closed;
+  componentDidMount() {
+    if (this.props.isOpen) {
+      this.open();
+    }
   },
 
-  handleBackdropClick(e) {
-    if (e.target !== e.currentTarget || !this.props.closeViaBackdrop) {
-      return;
+  componentWillReceiveProps(nextProps) {
+    let isOpen = this.props.isOpen;
+
+    if (!isOpen && nextProps.isOpen) {
+      this.open();
+    } else if (isOpen && !nextProps.isOpen) {
+      this.close();
     }
+  },
 
-    this.close();
+  isClosed() {
+    return this.state.closed;
   },
 
   isPopup() {
@@ -91,13 +102,33 @@ const Modal = React.createClass({
     return (data.length === 0) ? null : ((data.length === 1) ? data[0] : data);
   },
 
-  handleSelect(data, e) {
-    if (this.props.role === 'prompt' && data) {
+  // data === null: prompt -> canceled
+  // data === true: confirm -> confirmed
+  // data === false: confirm -> canceled
+  handleAction(data, e) {
+    let {
+      role,
+      onAction,
+    } = this.props;
+    let willClose = true;
+
+    if (role === 'prompt' && data) {
       data = this.getFieldData();
+
+      willClose = onAction.call(this, data, e);
+    } else {
+      onAction.call(this, data, e);
     }
 
-    this.close();
-    this.props.onAction.call(this, data, e);
+    willClose && this.requestClose(e);
+  },
+
+  handleBackdropClick(e) {
+    if (e.target !== e.currentTarget || !this.props.closeViaBackdrop) {
+      return;
+    }
+
+    this.requestClose(e);
   },
 
   open() {
@@ -111,6 +142,7 @@ const Modal = React.createClass({
     }
   },
 
+  // Only for instance self calling
   close() {
     if (this.isClosed() || this.state.isClosing) {
       return;
@@ -121,6 +153,11 @@ const Modal = React.createClass({
     });
   },
 
+  // for user actions
+  requestClose(e) {
+    this.props.onRequestClose(e);
+  },
+
   handleClosed() {
     this.setState({
       closed: true,
@@ -141,7 +178,7 @@ const Modal = React.createClass({
         {this.props.children}
         <div className={this.prefixClass('actions-group')}>
           <Button
-            onClick={this.close}
+            onClick={this.requestClose}
             block
             amStyle={this.props.btnStyle || 'secondary'}
           >
@@ -179,7 +216,7 @@ const Modal = React.createClass({
             <Icon
               name="close"
               className={this.setClassNS('popup-icon')}
-              onClick={this.close}
+              onClick={this.requestClose}
             />
           </div>
           <div className={this.setClassNS('popup-body')}>
@@ -200,7 +237,7 @@ const Modal = React.createClass({
       <Icon
         name="close"
         className={this.prefixClass('icon')}
-        onClick={this.close}
+        onClick={this.requestClose}
       />
     ) : null;
 
@@ -234,7 +271,7 @@ const Modal = React.createClass({
         buttons = (
           <span
             key="modalBtn"
-            onClick={this.handleSelect.bind(this, null)}
+            onClick={this.handleAction.bind(this, null)}
             className={btnClass}
           >
             {confirmText}
@@ -247,7 +284,7 @@ const Modal = React.createClass({
           return (
             <span
               key={'modalBtn' + i}
-              onClick={this.handleSelect.bind(this, i === 0 ? cancel : true)}
+              onClick={this.handleAction.bind(this, i === 0 ? cancel : true)}
               className={btnClass}
             >
               {text}
diff --git a/src/js/modal/ModalPortal.js b/src/js/modal/ModalPortal.js
new file mode 100644
index 0000000..80ec84d
--- /dev/null
+++ b/src/js/modal/ModalPortal.js
@@ -0,0 +1,55 @@
+import React, {createClass} from 'react';
+import ReactDOM, {
+  unmountComponentAtNode,
+  unstable_renderSubtreeIntoContainer as renderSubtreeIntoContainer
+} from 'react-dom';
+import CSSCore from '../utils/CSSCore';
+import Modal from './Modal';
+
+// const bodyElement = canUseDOM ? document.body : {appendChild: () => {}};
+const body = document.body;
+const bodyClassName = 'has-modal-open';
+
+const ModalPortal = createClass({
+  propTypes: {
+    isOpen: React.PropTypes.bool.isRequired,
+  },
+
+  getDefaultProps() {
+    return {
+      isOpen: false,
+    };
+  },
+
+  componentDidMount() {
+    this.node = document.createElement('div');
+    this.node.className = '__modal-portal';
+    body.appendChild(this.node);
+    this.renderModal(this.props);
+  },
+
+  componentWillReceiveProps(nextProps) {
+    this.renderModal(nextProps);
+  },
+
+  componentWillUnmount() {
+    unmountComponentAtNode(this.node);
+    body.removeChild(this.node);
+    CSSCore.removeClass(body, bodyClassName);
+  },
+
+  renderModal(props) {
+    CSSCore[(props.isOpen ? 'add' : 'remove') + 'Class'](body, bodyClassName);
+    this.portal = renderSubtreeIntoContainer(
+      this,
+      <Modal {...props} />,
+      this.node
+    );
+  },
+
+  render() {
+    return null;
+  }
+});
+
+export default ModalPortal;
diff --git a/src/js/modal/index.js b/src/js/modal/index.js
new file mode 100644
index 0000000..0cbdbc0
--- /dev/null
+++ b/src/js/modal/index.js
@@ -0,0 +1 @@
+export default from './ModalPortal';