复习遮罩层的运用

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