多个Dialog同时显示时的层次问题

close ant-design/ant-design#1546

Author: RaoHai

assets/index/Mask.less

@@ -1,4 +1,10 @@
 .@{prefixCls} {
+  &-container{
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 990;
+  }
   &-mask {
     position: fixed;
     top: 0;

examples/multiple.html

@@ -0,0 +1,121 @@
+/* eslint no-console:0 */
+
+import 'rc-dialog/assets/index.less';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Dialog from 'rc-dialog';
+
+const MyControl = React.createClass({
+  getInitialState() {
+    return {
+      visible: false,
+      visible2: false,
+      width: 600,
+      destroyOnClose: false,
+    };
+  },
+
+  onClick(e) {
+    this.setState({
+      mousePosition: {
+        x: e.pageX,
+        y: e.pageY,
+      },
+      visible: true,
+    });
+  },
+  onClick2() {
+    this.setState({
+      visible2: true,
+    });
+  },
+
+  onClose(e) {
+    console.log(e);
+    this.setState({
+      visible: false,
+    });
+  },
+
+  onClose2() {
+    this.setState({
+      visible2: false,
+    });
+  },
+
+  onDestroyOnCloseChange(e) {
+    this.setState({
+      destroyOnClose: e.target.checked,
+    });
+  },
+
+  changeWidth() {
+    this.setState({
+      width: this.state.width === 600 ? 800 : 600,
+    });
+  },
+
+  render() {
+    let dialog;
+    let dialog2;
+    if (this.state.visible || !this.state.destroyOnClose) {
+      dialog = (
+        <Dialog
+          visible={this.state.visible}
+          animation="zoom"
+          maskAnimation="fade"
+          onClose={this.onClose}
+          style={{ width: this.state.width }}
+          mousePosition={this.state.mousePosition}
+          title={<div>第一个弹框</div>}
+        >
+          <input />
+          <p>basic modal</p>
+          <button onClick={this.onClick2}> Open Second Dialog</button>
+          <div style={{ height: 200 }}></div>
+        </Dialog>
+      );
+    }
+    if (this.state.visible2) {
+      dialog2 = (
+        <Dialog
+          visible={this.state.visible2}
+          animation="zoom"
+          maskAnimation="fade"
+          onClose={this.onClose2}
+          mousePosition={this.state.mousePosition}
+          title={<div>第二个弹框</div>}
+        >
+          <input />
+          <p> SecondModal </p>
+        </Dialog>
+      );
+    }
+
+    return (
+      <div>
+        <p>
+          <button className="btn btn-primary" onClick={this.onClick}>show dialog</button>
+          &nbsp;
+          <label>destroy on close:
+            <input
+              type="checkbox"
+              checked={this.state.destroyOnClose}
+              onChange={this.onDestroyOnCloseChange}
+            />
+          </label>
+        </p>
+        {dialog}
+        {dialog2}
+      </div>
+    );
+  },
+});
+
+ReactDOM.render(
+  <div>
+    <h2>ant-design dialog</h2>
+    <MyControl />
+  </div>,
+  document.getElementById('__react-content')
+);

examples/multiple.js

@@ -70,6 +70,8 @@ class DialogWrap extends React.Component {
   getDialogContainer() {
     if (!this.dialogContainer) {
       this.dialogContainer = document.createElement('div');
+      const dialogProps = copy(this.props, ['prefixCls']);
+      this.dialogContainer.className = `${dialogProps.prefixCls}-container`;
       document.body.appendChild(this.dialogContainer);
     }
     return this.dialogContainer;