<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录弹出框</title>
<style type="text/css">
*{ border-style: none; }
#Login_btn{
width: 80px;
height: 30px;
background-color: red;
color: white;
border-radius: 5px;
}
.container{ height: 1000px; width: 100%; }
#mask{
background-color: #000;
opacity: 0.65;
filter: alpha(opacity=65);
height: 1000px;
width: 100%;
position: absolute;
left: 0;
top: 0;
}
#login{
position: fixed;
left: 36%;
top: 5%;
}
.logincon{
width: 398px;
height: 563px;
background:url(QQ图片20160921173744.png) no-repeat;
position: relative;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oBtn=document.getElementById('Login_btn');//获取登录按钮的节点
var sHeight=document.documentElement.scrollHeight;//获取页面的高度
var sWidth=document.documentElement.scrollWidth;//获取页面的宽度
var oMask=document.createElement("div");//创建一个“div”
oMask.id="mask";
oMask.style.height=sHeight+"px";
oMask.style.width=sWidht+"px";
document.body.appendChild(oMask);//把节点插入到文档中
}
</script>
</head>
<body>
<div>
<button id="Login_btn" onclick="showPic()">登录</button>
</div>
<!-- <div id="mask"></div>
<div id="login">
<div></div>
</div> -->
</body>
</html>
相关分类