网页弹出层原理

弹出层实质上是一个position属性为fixed的DOM元素，实现弹出层的原理就是：

1、在页面中创建一个DOM，用DIV或其他标签均可；

2、将此DOM的position设置为fixed，并设置其left、top、width、height属性；

3、设置此DOM元素的z-index为一个较大值，以保证覆盖弹出层底下的元素；

图中，弹出层下方有一层半透明的全页面蒙版，这个蒙版同样是一个position属性为fixed的DOM，其样式：

.mask{
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-color:#000;
    opacity:0.2;
}

要关闭弹出层时，只需将蒙版及DOM删掉即可。