react实现简单的遮罩层

这是一种常见的效果，一般为了突出显示内容时会被用到。例如下面的我所写的效果我希望点击后，我可以将剩余的部分填充为黑色（遮罩层）。实现它不算太难，难在高度适应性。
我记录一下我的实现 ps？：这里是部分代码，因为是实际项目中，所以内容较少，过后会继续补充～

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
}

目前做的项目是基于react移动端的，我会在state内定义dateSelected这一属性的bool值，每点击一次我就会取反，以此来判断是显示还是隐藏。

js部分

handleMask=()=>{
this.setState({dateSelected: !this.state.dateSelected
})
}
<divonClick={this.handleMask}className={`selectMask_box ${this.state.dateSelected ? "mask" : ""} `} >//这里是待展示的内容，<div>...</div>//你可以自己设置dataSelected的初始值，同时请注意注意三元运算的顺序。
</div>

作为一个实习生还在学习中，及时记录自己遇到的或大或小的知识点，这篇文章我会在在丰富一下，希望对大家有所帮助。
分割线----------------------------------------------

react实现简单的遮罩层相关推荐

layer遮罩层简单的遮罩层
在这里提供一个简单layer遮罩层,想深入了解可以进入 layer官网多多学习哦. 先看下HTML页面代码 <!DOCTYPE html> <html lang="en& ...
自写jQuery插件，实现简单网页遮罩层/弹出层功能，兼容IE6、IE7
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/u010480479/article/details/25159287 本屌丝近期工作要求重写站点全部 ...
简单的遮罩层加登录窗效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
(网页)中的简单的遮罩层
html: <div id="test"></div> <div id="log_window"> <!--<a ...
一个简单的遮罩弹出层效果
为什么80%的码农都做不了架构师?>>> 打酱油的日子就是要多学习下,最近在学写JS类库,虽然有面对对象语言的基础,但是感觉入手前端还是压力很大,就JS来说,干了半年了,水准还 ...
Taro React组件使用（1） —— Overlay 遮罩层【渐入渐出动画遮罩层】
Overlay 遮罩层提供一个简单的 Overlay 遮罩层,在页面上的层级为 1026; 1. 使用指南在 Taro 文件中引入组件,将组件放入src下的components文件夹中 impor ...
遮罩层的简单使用分析
今天我们来聊聊遮罩层的简单使用.遮罩层是基于以下几个属性来实现的: 1.z-index 定义:z-index 属性设置元素的堆叠顺序.拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面. 简单来 ...
html遮罩层动画制作,flash简单制作遮罩动画效果
flash简单制作遮罩动画效果QQ空间的开机动画大家应该都有,从最初的出现的一点到后面全部出现,如此神奇的效果到底是怎么做的呢,一起来看看吧!遮罩特效: 由于百度只能上传500k以内的照片,所以效果图 ...
如何简单的实现一个遮罩层
<br data-mce-bogus="1"><!doctype html> <html> <head> <title> ...

react实现简单的遮罩层

css部分

js部分

react实现简单的遮罩层相关推荐

最新文章

热门文章