diff --git a/src/common/Modal/Modal.js b/src/common/Modal/Modal.js
index ae93993d9..1a5e6441d 100644
--- a/src/common/Modal/Modal.js
+++ b/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() {
- document.body.appendChild(this.root);
+ componentWillMount() {
+ document.body.appendChild(this.modalElement);
}
componentWillUnmount() {
- document.body.removeChild(this.root);
+ document.body.removeChild(this.modalElement);
}
render() {
- return ReactDOM.createPortal(
-
- {this.props.children}
-
,
- this.root
- );
+ this.modalElement.className = classnames('modal-container', this.props.className);
+ this.modalElement.onclick = this.props.onRequestClose;
+ return ReactDOM.createPortal(this.props.children, this.modalElement);
}
}
diff --git a/src/common/Modal/styles.less b/src/common/Modal/styles.less
deleted file mode 100644
index bae411ef2..000000000
--- a/src/common/Modal/styles.less
+++ /dev/null
@@ -1,9 +0,0 @@
-.modal-container {
- position: absolute;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100vh;
- min-width: 1024px;
- overflow: hidden;
-}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 26dca7829..f82df16b4 100755
--- a/src/index.html
+++ b/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;
+ }