今天,我们来复习遮罩层的简单应用,首先在html界面我们简单的设置一个按钮,遮罩层和关闭按钮如图一,所谓的遮罩层就是在这个div设置一个透明度的属性,我们设置为0.5,代码如图二,
接下来就是最重要的部分,就是js的部分,由于现在我们还没给遮罩层设置高度,所以现在我们是看不到遮罩层的,遮罩层高度就是我们网页窗口大小的高度,这里就要设置一个全局变量height = 0;然后设置height = window innerheight,然后就是这个heigh几个px就是遮罩层的高度,还要注意的是由于我们的窗口大小是可以随意放大缩小的,然后还要设置window onresize就是窗口发生变化时在进行一次遮罩层的高度代码,然后我们为遮罩层设置display为none,用js获取按钮和关闭按钮以及遮罩层,最终代码如图三,这样,遮罩层的基本原理就是这样了。
复习遮罩层的运用
最新推荐文章于 2023-05-30 16:14:02 发布