js弹出层代码

2019独角兽企业重金招聘Python工程师标准>>>

// js代码
function commonFun(id,obj){
    var boxElem=document.getElementById(id);  // id弹出层的id
    var bgId=document.getElementById("bg");  // bg为背景层的id
    if(obj==1){  // obj为1时，弹出div层
        boxElem.style.cssText="";
        var scTop=window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
        var boHeight=document.body.offsetHeight;
        var boWidth=document.body.offsetWidth;
        var saHeight=window.screen.availHeight;
        var boxL=boWidth/2-boxElem.offsetWidth/2;
        var boxT=scTop+(saHeight/2-boxElem.offsetHeight/2)-100;
        console.log(scTop+" , "+saHeight/2+" , "+boxElem.offsetHeight/2);
        if(boHeight>saHeight){
            bgId.style.height=boHeight+"px";
        }else{
            bgId.style.height=saHeight+"px";
        }
        bgId.style.display="block";
        boxElem.style.cssText="top:"+boxT+"px;left:"+boxL+"px;";
    }else if(obj==2){  // obj为2时，关闭div弹出层
        boxElem.style.display="none";
        bgId.style.display="none";
    }
}

调用示例

// HTML代码
<div onclick="commonFun('comment',1)">打开</div>
<div id="comment" style="display:none;">
    <div onclick="commonFun('comment',2)">关闭</div>
</div>
<div id="bg" style="display:none;"></div>

在秀才的强烈要求下，将css也加上了，看后面吧

 

#comment{width:640px;height:216px;position:absolute;top:0;left:0;z-index:1200;}
#bg{position:absolute;top:0;left:0;z-index:1100;width:100%;background:#000;filter:Alpha(opacity=40);opacity:0.4;}

 

 

转载于:https://my.oschina.net/kangweb/blog/1635429