弹窗层级设置

src/components/DiagnosticList/index.jsx

@@ -173,7 +173,7 @@ class DiagnosticList extends Component {
         }
     }
     handleQuoteClick(item, index) {
-        const { handleQuoteClick } = this.props
+        // const { handleQuoteClick } = this.props
         // handleQuoteClick && handleQuoteClick(item)
         this.setState({
             activeHistory: index,

src/components/EmergencyProcedure/EmergencyModal/index.jsx

@@ -1,6 +1,7 @@
 import styles from './index.less'
 import small from '../img/small.png'
 import EmergencyPart from '../EmergencyPart'
+import ImgView from '../ImgView'
 import pic from '../img/pic.png'
 import pic1 from '../img/pic1.png'
 import pic2 from '../img/pic2.png'
@@ -67,16 +68,7 @@ class EmergencyModal extends React.Component{
               idx == 0?null:<img className={styles.imgs} src={pic} onClick={()=>{this.handleImgShow(true)}} alt=""/>
             }
             {
-              this.state.imgShow?<React.Fragment>
-                <div className={styles.imageModalWrap} onClick={()=>{this.handleImgShow(false)}}></div>
-                <div className={styles.imageModal} id="dragModalWrap">
-                  <div id="dragModalTitle" className={`${styles.dragImgWrap} drag-title`}>
-                    {data.emergencyname}
-                  </div>
-                  <img id="preImg" className={styles.emergencyImg} src={idx==1?pic1:idx==2?pic2:idx==3?pic3:idx==4?pic4:idx==5?pic5:null}/>
-                  <img className={styles.img} src={close} onClick={()=>{this.handleImgShow(false)}} />
-                </div>
-              </React.Fragment>:null
+              this.state.imgShow?<ImgView name={data.emergencyname} idx={idx} handleImgShow={this.handleImgShow}></ImgView>:null
             }
           </div>
           <div className={styles.modalTopR} onClick={()=>{this.handleSlideShow()}} id="modalTopR">其他危重症状</div>

src/components/EmergencyProcedure/EmergencyModal/index.less

@@ -6,7 +6,7 @@
   bottom: 10px;
   width: 450px;
   right: 10px;
-  z-index: 205;
+  z-index: 202;
   padding: 15px;
   background-color: #fff;
   .modalTop {
@@ -124,4 +124,59 @@
     right: 10px;
     z-index: 800;
   }
+}
+.imageModalWrap {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 300;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  opacity: 0.6;
+  filter: alpha(opacity=60);
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
+}
+.imageModal {
+  position: fixed;
+  background-color: #fff;
+  overflow: hidden;
+  z-index: 500;
+  width: 1000px;
+  padding-top: 30px;
+  box-sizing: border-box;
+  margin-left: -500px;
+  // margin-top: -400px;
+  // height: 800px;
+  // top: 50%;
+  left: 50%;
+  top: 60px;
+  bottom: 60px;
+  .emergencyImg{
+    height: 100%;
+    width: 100%;
+    position: relative;
+    float: left;
+    // position: absolute;
+    // left: 50%;
+    // transform: translateX(-50%);
+  }
+}
+.dragImgWrap {
+  width: 100%;
+  height: 30px;
+  line-height: 36px;
+  text-indent: 1em;
+  z-index: 502;
+  background-color: transparent;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+img.img{
+  cursor: pointer;
+  position: absolute;
+  top: 6px;
+  right: 10px;
+  z-index: 800;
 }

src/components/EmergencyProcedure/ImgView/index.jsx

@@ -0,0 +1,30 @@
+import styles from '../EmergencyModal/index.less'
+import pic1 from '../img/pic1.png'
+import pic2 from '../img/pic2.png'
+import pic3 from '../img/pic3.png'
+import pic4 from '../img/pic4.png'
+import pic5 from '../img/pic5.png'
+import close from '@common/images/icon_close.png';
+import ReactDom from "react-dom";
+
+class ImgView extends React.Component{
+  constructor(props){
+    super(props)
+  }
+  render(){
+    const {name,idx,handleImgShow} = this.props;
+    const domNode = document.getElementById('root');
+    return ReactDom.createPortal(<React.Fragment>
+            <div className={styles.imageModalWrap} onClick={()=>{handleImgShow(false)}}></div>
+            <div className={styles.imageModal} id="dragModalWrap">
+              <div id="dragModalTitle" className={`${styles.dragImgWrap} drag-title`}>
+                {name}
+              </div>
+              <img id="preImg" className={styles.emergencyImg} src={idx==1?pic1:idx==2?pic2:idx==3?pic3:idx==4?pic4:idx==5?pic5:null}/>
+              <img className={styles.img} src={close} onClick={()=>{handleImgShow(false)}} />
+            </div>
+          </React.Fragment>,domNode)
+  }
+}
+
+export default ImgView;