弹出层实质上是一个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删掉即可。