React简单遮罩层

CSS代码

.mask{
  background: rgba(0,0,0,0.4) !important;
  z-index: 10;
  height: 100vh;
  position: fixed;
  width: 100vw;
}
.selectMask_box{
  background: rgba(0,0,0,0);
  transition: all .2s linear
}

JS代码

handleMask=()=>{
this.setState({
   dateSelected: !this.state.dateSelected
})
}
<div
    onClick={this.handleMask}
    className={`selectMask_box ${this.state.dateSelected ? "mask" : ""} `} >

  //这里是待展示的内容，<div>...</div>
 //你可以自己设置dataSelected的初始值，同时请注意注意三元运算的顺序。
</div>

把 div放到页面最上方即可

原文地址：https://www.cnblogs.com/it-Ren/p/12174650.html