遮罩层笔记

     遮罩层笔记

下面是我对遮罩层的了解并且把它做成了一个简单的样式，让我们来看看它的HTML代码：

上图是遮罩层的布局用3个类和几个标签来完成的。它的HTML代码中没有什么特别之处，要完成遮罩层的布局主要在css部分，接下来就是它的css样式：

上面的图片就是遮罩层的布局写遮罩层之前要写一下主页面的布局上面的第一个类就是主页免得布局而且写遮罩层的时候一定要加上position：fixed；这个属性不然是完成不了的，然后就是写你想要表达的样式，当然要把遮罩层部分隐藏起来也就是加上display：none；这个属性，最后要写上它的js部分也就是点击事件如下图就是js部分的样式：

写完了js部分的样式一个简单的遮罩层就完成了，下面的两张图就是主页面和遮罩层的模型：

遮罩层的样式就是第二个图片，想要显示第二张图，点击第一个图片就可以了当然要写了点击事件才可以完成的。以上的这些就是我对遮罩层的了解。