网站遮罩层和登陆框的实现

1 获取页面的高度和宽度

var sHeight = document.documentElement.scrollHeight;
var sWidth = document.documentElement.scrollWidth;


2 获取可视区域的高度和宽度(wWidth == sWidth)

var wHeight = document.document.clientHeight;
var wWidth = document.document.clientWidth;


3 动态创建元素1

var oMask = document.createElement("div");
oMask.id = "mask";
oMask.style.height = sHeight + "px";
oMask.style.width = sWidth + "px";
document.body.appendChild(oMask); // 追加节点


4 动态创建元素2

var oLogin = document.createElement("div");
oLogin .id = "login";
oLogin.innerHTML = "<div...></div>"
document.body.appendChild(oLogin);


5 获取元素的宽度和高度

var dHeight = oLogin.offsetHeight;
var dWidth = oLogin.offsetWidth;

6 设置元素居中显示(left和top)

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


你可能感兴趣的:(网站遮罩层和登陆框的实现)