原生js实现弹出层效果的教程

//获取遮罩层(内容)的高度和宽度

 varsHeight=document.documentElement.scrollHeight;

 varsWidth=document.documentElement.scrollWidth;

//获取login的宽度和高度并设置偏移值

 vardHeight=oLogin.offsetHeight;

 vardWidth=oLogin.offsetWidth;

 oLogin.style.left=(sWidth-dWidth)/2+"px";

 oLogin.style.top=(wHeight-dHeight)/2+"px";

登录

1

1

1

1

1

1

1

1

1

1

function openNew(){

 //获取页面body！内容！的高度和宽度

 var sHeight=document.documentElement.scrollHeight;

 var sWidth=document.documentElement.scrollWidth;

 //获取可视区域高度，宽度与页面内容的宽度一样

 var wHeight=document.documentElement.clientHeight;

 //创建遮罩层div并插入body

 var oMask=document.createElement("div");

 oMask.id="mask";

 oMask.style.height=sHeight+"px";

 //宽度直接用100%在样式里

 document.body.appendChild(oMask);

 //创建登录层div并插入body

 var oLogin=document.createElement("div");

 oLogin.id="login";

 oLogin.innerHTML=""

 document.body.appendChild(oLogin);

 //获取login的宽度和高度并设置偏移值

 var dHeight=oLogin.offsetHeight;

 var dWidth=oLogin.offsetWidth;

 oLogin.style.left=(sWidth-dWidth)/2+"px";

 oLogin.style.top=(wHeight-dHeight)/2+"px";

 //获取关闭按钮

 var oClose=document.getElementById("close");

 oMask.onclick=oClose.onclick=function(){

  document.body.removeChild(oMask);

  document.body.removeChild(oLogin);

 }

}

window.onload=function(){

 var oBtn=document.getElementById("btnLogin");

 oBtn.onclick=function(){

  openNew();

 }

}