Antd项目模态框遮罩层调整

• 问题描述：

        因项目需要，将平台与应用模块分开开发、应用模块前端展示均需嵌入基础平台，使得前端入口、界面样式等达到统一。但因各模块开发均适用antd框架，应用模块前端布局适用ARE平台BasicLayout布局，导致应用模块中弹出模态框遮罩层与平台弹出模态框遮罩层不一致，如图所示：
平台弹框，全屏遮罩，菜单和页签均不能操作：

应用模块弹出框，仅遮罩右侧可视区域，菜单和页签切换不受影响

• 问题原因：

        为了解决平台弹框全屏遮罩问题，查了antd官方文档，发现模特框弹出时可设定弹出区域属性getContainer，若不设置则默认使用当前页面最外层

作为弹出区域，平台中root在最外层，因此全屏遮罩，而应用模块属于内嵌形式嵌入平台布局中，其自带的root区域为右侧可视区域，从而导致平台弹出框全屏遮罩

• 解决方案：

1.设置平台弹出框处于rootDiv
2.调整css样式，使得遮罩层遮罩区域收缩到右侧可视区域

• 代码展示：

1.在弹出框父页面HomeModuleConfig中，设置

，将弹出框组件包含在div区域内

      
          
            
  //父页面增加rootDiv
              

                   record.id}
                    onSelectRow={this.handleSelectRows}
                    onChange={this.handleStandardTableChange}
                    pagination={paginationProps}
                    onRow={this.handleRowDoubleClick}
                  />
                  
                
              
            

2.在弹出框页AddHomeModuleConfig中增加函数getContainer，并增加模态框model的属性getContainer={this.getContainer}

 //增加函数，rootDiv与父页面新增的divID对应
getContainer = () => {
    return document.getElementById("rootDiv");
  };


 handleModalVisible()}
   getContainer={this.getContainer}  //增加模态框显示区域树形
  >
...

3.覆盖平台中弹出框遮罩层样式，CSS样式中ID与弹出框父页面中增加的divID保持一致，即rootDiv

:global{
      #rootDiv .ant-modal-wrap {
        margin-left: 250px;
        top: 6.625rem,
      }

      #rootDiv .ant-modal-mask {
        margin-left: 250px;
        top: 6.625rem
      }
}

• 结果展示：

调整后，平台模态框弹出时，菜单和页签可正常切换

*该方式可适用于所有antd项目中模态框的遮罩层调整，具体遮罩区域，请修改CSS样式到适当值