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; + }