nested modals issue fixed

src/common/Modal/Modal.js

@@ -1,31 +1,27 @@
-import React, { PureComponent } from 'react';
+import { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import classnames from 'classnames';
-import styles from './styles';
 
 class Modal extends PureComponent {
     constructor(props) {
         super(props);
 
-        this.root = document.createElement('div');
+        this.modalElement = document.createElement('div');
     }
 
-    componentDidMount() {
+    componentWillMount() {
-        document.body.appendChild(this.root);
+        document.body.appendChild(this.modalElement);
     }
 
     componentWillUnmount() {
-        document.body.removeChild(this.root);
+        document.body.removeChild(this.modalElement);
     }
 
     render() {
-        return ReactDOM.createPortal(
+        this.modalElement.className = classnames('modal-container', this.props.className);
-            <div className={classnames(styles['modal-container'], this.props.className)} onClick={this.props.onRequestClose}>
+        this.modalElement.onclick = this.props.onRequestClose;
-                {this.props.children}
+        return ReactDOM.createPortal(this.props.children, this.modalElement);
-            </div>,
-            this.root
-        );
     }
 }
 

src/common/Modal/styles.less

@@ -1,9 +0,0 @@
-.modal-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    min-width: 1024px;
-    overflow: hidden;
-}

src/index.html

@@ -96,7 +96,7 @@
             font-weight: normal;
         }
 
-        html, body, #app {
+        html, body, #app, .modal-container {
             position: relative;
             width: 100vw;
             height: 100vh;
@@ -106,6 +106,13 @@
             font: 13px / 18px 'Open Sans', 'LatoLight', 'Arial', 'Helvetica', 'sans-serif';
             z-index: 0;
         }
+
+        .modal-container {
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 1;
+        }
     </style>
 </head>