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简单遮罩层的主要内容,如果未能解决你的问题,请参考以下文章

Jquery超简单遮罩层实现代码

Jquery超简单遮罩层实现代码

求jquery easyui中使用的遮罩层(高亮层)代码,越简单越好!(要测试成功的!)

点击弹出居中带有透明遮罩层窗口:

ios遮罩层的简单使用

简单的ajax遮罩层(加载进度圈)cvi_busy_lib.js