<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<title>彈出層效果</title>
<link?rel="stylesheet"?type="text/css"?href="main.css"/>
</head>
<script?type="text/javascript"?src="login.js"></script>
<body>
???<div?id="login-area">
??????<button?id="btnLogin"?hidefocus="true"?class="login-btn">登錄</button>
????</div>
????<div?id="mask"></div>
<div?id="login">
??<div?class="loginCon">?
???<div?id="close">
???</div>
???</div>
??</div>
</body>
</html>@charset?"utf-8";
/*?CSS?reset?*/
?#login-area{
?????float:right;
?????margin-top:10px;
?????position:relative;
????}
????.login-btn?{
????????font-family:'微軟雅黑';??
????????width:100px;
????????height:40px;
????????background:#f77f2f;
????????text-align:center;
????????display:block;
????????line-height:40px;
????????font-size:14px;
????????opacity:.9;
????????text-decoration:none;
????????color:#fff;
????????cursor:pointer
}
.login-btn:hover?{?
????opacity:1;}
#close{?
background:url(close.png)?no-repeat;?
width:30px;?
height:30px;?
cursor:pointer;?
position:absolute;?
right:5px;?
top:15px;?
text-indent:-999em;
}
#mask{?
background-color:#ccc;
opacity:0.5;
filter:?alpha(opacity=50);?
position:absolute;?
left:0;
top:0;
z-index:1000;
}
#login{?
position:fixed;
z-index:1001;
}
.loginCon{?
position:relative;?
width:670px;
height:380px;
background:url(login.png)?#2A2C2E?center?center?no-repeat;
}//?JavaScript?Document
function?openNew(){
//獲取頁(yè)面的高度和寬度
var?sWidth=document.body.scrollWidth;
var?sHeight=document.body.scrollHeight;
//獲取頁(yè)面的可視區(qū)域高度和寬度
var?wHeight=document.documentElement.clientHeight;
var?oMask=document.createElement("div");
oMask.id="mask";
oMask.style.height=sHeight+"px";
oMask.style.width=sWidth+"px";
document.body.appendChild(oMask);
var?oLogin=document.createElement("div");
oLogin.id="login";
oLogin.innerHTML="<div?class='loginCon'><div?id='close'>點(diǎn)擊關(guān)閉</div></div>";
document.body.appendChild(oLogin);
//獲取登陸框的寬和高
var?dHeight=oLogin.offsetHeight;
var?dWidth=oLogin.offsetWidth;
//設(shè)置登陸框的left和top
oLogin.style.left=sWidth/2-dWidth/2+"px";
oLogin.style.top=wHeight/2-dHeight/2+"px";
//點(diǎn)擊關(guān)閉按鈕
var?oClose=document.getElementById("close");
//點(diǎn)擊登陸框以外的區(qū)域也可以關(guān)閉登陸框
oClose.onclick=oMask.onclick=function(){
document.body.removeChild(oLogin);
document.body.removeChild(oMask);
};
};
window.onload=function(){
var?oBtn=document.getElementById("btnLogin");
//點(diǎn)擊登錄按鈕
oBtn.onclick=function(){
openNew();
return?false;
}
}
老是不成功，各路大神幫忙看一下~~
哎哎萌
2015-11-01 17:28:43
