Ant Design中的Modal框单独悬浮，并可以点击后面元素，使其遮罩蒙版透明

需求：需要一个Modal弹框，在弹框弹出期间，弹窗后面背景板可以自由操作，只有在点击Modal的x关闭才会关闭弹框，并且Modal弹框可以按住顶部实现屏幕内随意拖动效果。

过程计划方法尝试：

计划：一开始确定的方法就是通过CSS的pointerEvents:'none'，把背景遮罩的指针事件给关掉

方法①：我一开始尝试用css定位到内部的ant-modal-root或者ant-modal-wrap然使用global去改变css样式，后面一直定位不到。over。

方法②：后面尝试使用DOM，在弹框出现后去通过className去定位元素，然后在去改变style的元素，去添加样式，这方法是定位到了，但是改了不实现。over。

最终实现：重新拉了一遍文档，发现有现成的api，直接加wrapClassName，好事！！.....

最终实现代码

弹框：

<Modal
  wrapClassName={styles.zrjCSS} //对话框外层容器的类名！！！不同于className是容器类名
  title={<div style={{ width: '100%', cursor: 'move' }} onMouseDown={this.onMouseDown}>孜然卷弹框</div>}
  style={style} //配合拖动时改变弹框位置
  destroyOnClose={true}  //关闭时销毁 Modal 里的子元素
  mask={false}  //关闭遮罩
  maskClosable={false}  //点击蒙层是否允许关闭
  visible={this.state.RGZJvis}
  onOk={this.RGZJOK}
  okText={'保存'}
  width={650}
  onCancel={this.RGZJhandleCancel}
>
  孜然卷内容
</Modal>

其种title中的拖动事件

onMouseDown = (e: any) => {
  e.preventDefault();
  //记录初始移动的鼠标位置
  let startPosX = e.clientX;
  let startPosY = e.clientY;
  const { styleLeft, styleTop } = this.state;
  //添加鼠标移动事件
  document.body.onmousemove = e => {
    let left = e.clientX - startPosX + styleLeft;
    let top = e.clientY - startPosY + styleTop;
    if (this.inWindow(e.clientX, e.clientY, startPosX, startPosY)) {
      this.setState({
        styleLeft: left,
        styleTop: top,
      })
    }
  };
  //鼠标放开时去掉移动事件
  document.body.onmouseup = function () {
    document.body.onmousemove = null;
  };
}
const { styleLeft, styleTop } = this.state;
const style = { left: styleLeft, top: styleTop }

其种的className 

.zrjCSS{
  pointer-events: none;
}

其种需求最后一步，拖动可见往期文章   Modal拖动实现