复习遮罩层的运用

喜欢ヅ旅行 2022-03-17 06:56 250阅读 0赞

今天，我们来复习遮罩层的简单应用，首先在html界面我们简单的设置一个按钮，遮罩层和关闭按钮如图一，![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70]所谓的遮罩层就是在这个div设置一个透明度的属性，我们设置为0.5，代码如图二，![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70 1]接下来就是最重要的部分，就是js的部分，由于现在我们还没给遮罩层设置高度，所以现在我们是看不到遮罩层的，遮罩层高度就是我们网页窗口大小的高度，这里就要设置一个全局变量height = 0；然后设置height = window innerheight，然后就是这个heigh几个px就是遮罩层的高度，还要注意的是由于我们的窗口大小是可以随意放大缩小的，然后还要设置window onresize就是窗口发生变化时在进行一次遮罩层的高度代码，然后我们为遮罩层设置display为none，用js获取按钮和关闭按钮以及遮罩层，最终代码如图三，这样，遮罩层的基本原理就是这样了。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190222193911761.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190222193928246.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70 2]: /images/20220317/0eac2246d30c46d6842728c3294442ab.png