React简单遮罩层
Posted it-ren
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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放到页面最上方即可
以上是关于React简单遮罩层的主要内容,如果未能解决你的问题,请参考以下文章