這是遮罩層樣式

#oMask{

? ? background:black;

? ? opacity:0.7;

? ? filter:alpha(opacity=70);

? ? z-index:1000;

}

? ??

下面是JS代碼

function openNew(){

? ? //獲取頁面的高度和寬度

? ? var sWidth=document.documentElement.scrollWidth;

? ? var sHeight=document.documentElement.csrollHeight ; ?//獲取頁面的高度

? ? //獲取頁面的可視區(qū)域高度和寬度

? ? var wHeight=document.documentElement.clientHeight ;// 獲取頁面可視區(qū)域的高度

? ? var wWidth=document.documentElement.clientWidth;

? ??

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

? ? ?oMask.id = "oMask";

? ??

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

oLogin.id="login";

oLogin.innerHTML="<div class='loginCon'><div id='close'>點擊關閉</div></div>";

? ?document.body.appendChild(oLogin); ? ?//插入創(chuàng)建的登陸框

? ?document.body.appendChild(oMask);

//獲取登陸框的寬和高

var dHeight=oLogin.offsetHeight ; ? // 獲取登陸框的高度

var dWidth= ?oLogin.offsetWidth ; ? ? ?// 獲取登陸框的寬度

//設置登陸框的left和top

? ? ? ? oMask.style.height = sHeight;

? ? ? ? oMask.style.width = sWidth;

? ? ? ?

oLogin.style.left=wWidth/2-dWidth/2+"px";

oLogin.style.top= (wHeight-dHeight)/2+'px' ?; ?//設置登陸框top值

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

?

//點擊登陸框以外的區(qū)域也可以關閉登陸框

oMask.onclick = oClose.onclick=function()

{

document.body.removeChild(oLogin);

}

}

window.onload=function()

{

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

//點擊登錄按鈕

oBtn.onclick=function()

{ ? ? ? ?

? ?openNew(); //執(zhí)行openNew函數

}

}