码迷,mamicode.com
首页 > 其他好文 > 详细

React简单遮罩层

时间:2020-01-10 10:32:40      阅读:416      评论:0      收藏:0      [点我收藏+]

标签:mask   运算   set   font   dex   sel   rgb   his   osi   

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简单遮罩层

标签:mask   运算   set   font   dex   sel   rgb   his   osi   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!