图片放大后点击隐藏

src/modules/page/layers/ImageLayer.js

@@ -1,10 +1,9 @@
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom'
 import { Button, Icon } from 'antd';
-import './TaskResultLayer.css'
+import './TaskResultLayer.css';
 
 class ImageLayer extends Component {
-
 	constructor(props) {
 		super(props);
 		this.state = {
@@ -21,13 +20,13 @@ class ImageLayer extends Component {
 		});
 	}
 
-
 	render() {
 		let { showImage, imageSrc, } = this.props;
 		return ReactDOM.createPortal(
 			<div>
 				{showImage ?
 					<div className="taskResultLayer">
+						<div className="closePanel" onClick={() => this.props.onImageLayerClose()}></div>
 						<div className={"ImageLayerbutton mt20"}>
 							<Button
 								className={"fr"}
@@ -53,8 +52,6 @@ class ImageLayer extends Component {
 						<div className="passContent" style={{ transform: this.state.transStyle }}>
 							<img src={imageSrc} className="passImg" unselectable="on" alt="" />
 						</div>
-
-
 					</div>
 					:
 					<div></div>

src/modules/page/layers/ImageLayerOfCommentHOC.js

@@ -16,7 +16,6 @@ export function ImageLayerOfCommentHOC(options = {}) {
       }
 
       onDelegateClick = (event) => {
-        console.log("imgclick",event);
         const imageSrc = event.target.src || event.target.getAttribute('src') || event.target.getAttribute('href')
         // 判断imageSrc是否是图片
         const fileName = event.target.innerHTML.trim()

src/modules/page/layers/TaskResultLayer.css

@@ -40,8 +40,17 @@
     justify-content: center;
     align-items: center;
     display: -webkit-flex;
-    height: 90%;
+    height: 100%;
     text-align: center;
+    position: absolute;
+    width:100%;
+    z-index: 4;
+}
+.closePanel{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 5;
 }
 .passImg{
     max-width: 86%;