修改弹窗层级

src/components/Banner/index.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import style from "./index.less";
+import ReactDom from "react-dom";
 import logo from "../../common/images/logoa.png";
 import setup from "../../common/images/setup.png";
 import close from '../../common/images/icon_close.png';
@@ -99,7 +100,7 @@ class Banner extends Component {
     const {visible,disVisible,copyVisible,ifShow,deptName} = this.props;
     const {mode,zIndex,emergencyBox} = this.state;
     const {showConfigModal, closeConfigModal, changeType, confirmType} = this;
-
+    const domNode = document.getElementById('root');
     return (
       <div className={style["logo"]} >
         <img src={logo} />
@@ -121,22 +122,13 @@ class Banner extends Component {
           confirmType = {confirmType}
         >
           </ModeChange>}
-        {/* {visible?<div className={style['modal']}>
-          <div className={style['shade']} onClick={closeConfigModal}></div>
-          <div className={style['content']}>
-            <div className={style['close']}>设置<img src={close} onClick={closeConfigModal} /></div>
-            <p className={style['title']}>模式切换<i>（模式说明：切换模式会清空当前所有的数据）</i></p>
-            <ul>
-              <li className={+mode===0?style['selected']:''} onClick={() => changeType(0)}><img src={ok} />智能推送模式</li>
-              <li className={+mode===1?style['selected']:''} onClick={() => changeType(1)}><img src={ok} />纯文本模式</li>
-            </ul>
-            <div className={style['btn']} onClick={confirmType}>确认</div>
-          </div>
-        </div>:''} */}
-        {emergencyBox?<div className={style['modal']}>
-            <div className={style['shade']} onClick={this.handleHisClose}></div>
-            <Emergency show={emergencyBox} close={this.handleHisClose}/>
-          </div>:''}
+        {emergencyBox? ReactDom.createPortal(<React.Fragment> 
+            <div className={style['modal']}>
+              <div className={style['shade']} onClick={this.handleHisClose}></div>
+              <Emergency show={emergencyBox} close={this.handleHisClose}/>
+            </div>
+          </React.Fragment>
+          , domNode):''}
         
       </div>
     );

src/components/Banner/index.less

@@ -53,4 +53,16 @@
   i{
     color: red;
   }
+}
+.shade {
+  .maskZIndex;
+  position: fixed;
+  top: 0;
+  left:0;
+  right: 0;
+  bottom: 0;
+  background: #000;
+  opacity: 0.6;
+  filter:alpha(opacity=60);
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
 }

src/components/Emergency/index.less

@@ -1,8 +1,10 @@
 @import "~@less/mixin.less";
+@import "~@less/variables.less";
 .mask-box{
   .mask;
 }
 .emer-box{
+  .maskZIndex;
   // width: 1060px;
   width: 1024px;
   // height: 700px;
@@ -11,7 +13,6 @@
   top:20px; //搜索结果展示-6-26
   left:50%;
   margin-left: -530px;
-  z-index: 2002;
   background: #fff;
   // overflow: hidden;
   .emer-content{
@@ -19,11 +20,11 @@
     height: 100%;
   }
   .closeModal {
+    .contentZIndex1;
     width: 100%;
     position: absolute;
     height: 45px;
     top: 0px;
-    z-index: 800;
   }
   .img{
     width: 40px;
@@ -32,7 +33,6 @@
     top: 5px;
     right: 3px;
     cursor: pointer;
-    z-index: 888;
   }
   .emer-left{
     // width: 360px;

src/components/EmergencyProcedure/EmergencyModal/index.less

@@ -124,6 +124,7 @@
   filter: alpha(opacity=60);
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60);";
 }
+
 .imageModal {
   .maskContentZIndex1;
   position: fixed;

src/components/HistoryCaseContainer/HistoryList/index.less

@@ -1,5 +1,7 @@
 @import "~@less/mixin.less";
+@import "~@less/variables.less";
 .mainHistory {
+    .maskZIndex;
     position: fixed;
     margin-left: -500px;
     left: 50%;
@@ -8,14 +10,13 @@
     bottom: 7%;
     height: 86%;
     background-color: #fff;
-    z-index: 242;
     overflow: hidden;
     .close {
         position: absolute;
         top: 0;
         right: 0;
         cursor: pointer;
-        z-index: 9999;
+        .contentZIndex1
     }
     .mainHistoryLeft {
         width: 300px;
@@ -113,7 +114,7 @@
       height: 40px;
       margin-left: 300px;
       position: absolute;
-      z-index: 9998;
+      .contentZIndex1;
       // border-bottom: 1px solid #EAEDF1;
     }
 }