Question

请问弹出层怎么用js写呢？

Answer 1

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

Answer 2

<div id="monup" style="position:absolute;top:0px;left:0px;width:300px;height:300px;background-color:#FFF68F;z-index:255;visibility:hidden" onclick="closemon();">
</div>

js部份是：

var k1,k2,k3,k4,k5,k6;
var x=500,y=300;

k1=Math.max(document.documentElement.scrollWidth,document.body.scrollWidth,document.documentElement.clientWidth,document.body.clientWidth)+"px";
document.getElementById("mon").style.width=k1;
k2=Math.max(document.documentElement.scrollHeight,document.body.scrollHeight,document.documentElement.clientHeight,document.body.clientHeight)+"px";
document.getElementById("mon").style.height=k2;
document.getElementById("mon").style.filter='alpha(opacity=40);';
document.getElementById("mon").style.opacity=0.40;
document.getElementById("mon").style.visibility="visible";
k1=Math.max(document.documentElement.scrollLeft,document.body.scrollLeft);
k2=Math.max(document.documentElement.scrollTop,document.body.scrollTop);
k3=document.documentElement.clientWidth;
k4=document.documentElement.clientHeight;
((k3-x)>0) ? k5=parseInt((k3-x)/2+k1) : k5=k1;
((k4-y)>0) ? k6=parseInt((k4-y)/2+k2) : k6=k2;
document.getElementById("monup").style.width=x+"px";
document.getElementById("monup").style.height=y+"px";
document.getElementById("monup").style.left=k5+"px";
document.getElementById("monup").style.top=k6+"px";
document.getElementById("monup").style.visibility="visible";

适用各种浏览器