前端遮罩层实现_一个前端博客(5)——遮罩效果及tool.js实现

遮罩效果

遮罩效果的应用还是很多的，效果如图:

实现原理是通过一个div作为遮罩，它要绝对行为，高度和宽度为浏览器的高度和宽度，背景为半透明，这里半透明的效果若要兼容IE的话，通过filter:alpha(opacity=30)，它等价于在其他的浏览器opacity:0.3.下面为代码:

#screen{position:absolute;top:0;left:0;background:#000;opacity:0.3;z-index:9998;display:none;

}

这里会看到有两个没有提到的属性，z-index和display。

z-index是为了当遮罩出现的时候，使后面的区域不可操作。

display:none;在开始的时候是没有遮罩的，需要通过点击登录，注册等类似的按钮，使它出现，所以在此之前它是不可见的。

这里我们的登录框的样式要做一个更新:

#login{......

z-index:9999;

}

为什么呢？因为登录框在遮罩上面所以登录框的z-index一定比遮罩要大。

好了，我们做完了准备工作，开始考虑如何让遮罩的宽和高为浏览器宽和高。

我们创建一个lock()方法:

Tar.prototype.lock = function() {for(var i = 0; i < this.elements.length; i++) {this.elements[i].style.display = "block";this.elemen