<!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>
<style type=”text/css”>
#close {
background: url(http://cdn.attach.qdfuns.com/notes/pics/201612/09/234021dt3rvxzt1lrl5phz.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;
width: 100%;
display: none;
}
#login {
position: fixed;
z-index: 1001;
left: 50%;
top: 50%;
margin-top: -190px;
margin-left: -335px;
display: none;
}
.loginCon {
position: relative;
width: 670px;
height: 380px;
background: url(http://cdn.attach.qdfuns.com/notes/pics/201612/09/234030lc9b0oc3za0qhogg.png)
#2a2c2e center center no-repeat;
background-size: 100%;
}
.login-btn {
font-family: 微软雅黑;
width: 100px;
height: 40px;
background: rgb(201, 57, 74);
text-align: center;
display: block;
line-height: 40px;
font-size: 14px;
opacity: 0.9;
text-decoration: none;
color: rgb(255, 255, 255);
cursor: pointer;
}
</style>
</head>
<body>
<div id=”header”>
<div class=”container” id=”nav”>
<div id=”login-area”>
<button id=”btnLogin” hidefocus=”true” class=”login-btn”>
登录
</button>
</div>
</div>
</div>
<div id=”mask”></div>
<div id=”login”>
<div class=”loginCon”><div id=”close”></div></div>
</div>
<script>
window.onload = function() {
var oMask = document.getElementById(‘mask’)
var oClose = document.getElementById(‘close’)
var oBtn = document.getElementById(‘btnLogin’)
var oLogin = document.getElementById(‘login’)
var oHeight = document.body.scrollHeight
oMask.style.height = oHeight + ‘px’
console.log(oHeight)
oBtn.onclick = function() {
oMask.style.display = ‘block’
oLogin.style.display = ‘block’
}
oMask.onclick = oClose.onclick = function() {
oMask.style.display = ‘none’
oLogin.style.display = ‘none’
}
}
</script>
</body>
</html>
近期评论