|
@@ -0,0 +1,41 @@
|
|
|
+import React, { Component } from "react";
|
|
|
+import ReactDom from "react-dom";
|
|
|
+import style from "./index.less";
|
|
|
+import Notify from '@commonComp/Notify';
|
|
|
+import close from '@common/images/icon_close.png';
|
|
|
+/**
|
|
|
+ * title:标题
|
|
|
+ * children:弹窗内容
|
|
|
+ * onClose:弹窗关闭事件
|
|
|
+ * shadeClose:点蒙层关闭,默认true
|
|
|
+ *footer:固定在弹窗底部的内容如确定按钮
|
|
|
+ *icon:标题前的图标
|
|
|
+ *width:弹窗的宽度
|
|
|
+ *height:弹窗的高度
|
|
|
+ * **/
|
|
|
+
|
|
|
+class ComplexModal extends Component {
|
|
|
+ constructor(props) {
|
|
|
+ super(props)
|
|
|
+ }
|
|
|
+ render() {
|
|
|
+ const { onclose,title,children,footer,shadeClose,icon,width,height} = this.props;
|
|
|
+ const marginLeft = width? -parseInt(width)/2 : '';
|
|
|
+ const marginTop = height? -parseInt(height)/2: '';
|
|
|
+ const domNode = document.getElementById('root');
|
|
|
+ return ReactDom.createPortal(<div className={style['container']}>
|
|
|
+ <div className={style['shade']} onClick={shadeClose===false?'':onclose}></div>
|
|
|
+ <div className={style['modal']} style = {{width: width?width:'auto', marginLeft:marginLeft, height:height?height:'auto', marginTop:marginTop}}>
|
|
|
+ <div className={style['close']}>
|
|
|
+ {icon?<img src={icon} />:''}
|
|
|
+ {title}
|
|
|
+ <img src={close} onClick={onclose} className={style['closeIcon']} />
|
|
|
+ </div>
|
|
|
+ <div className={style["content"]} style = {{width: width?width:'auto'}}>{children}</div>
|
|
|
+ <div className={style['footer']} style = {{width: width?width:'auto'}}>{footer}</div>
|
|
|
+ </div>
|
|
|
+ </div>,domNode);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default ComplexModal;
|