<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表单</title>
<style type="text/css">
#mask{background:#000;opacity:0.75;filter:aloha(opacity=75);width:100%;}
#denglu{color:#FFF;background-color:#F00;width:3%;height:40px;font-size:17px;font-family:"微软雅黑";;border-radius:5px;border:1px;position:absolute;right:100px;top:50px;cursor:pointer;}
#ologin{width:25%;height:370px;background-color:#efefef;position:absolute;left:960px;top:350px;border-radius:5px;border:1px;display:none;z-index:10;}
.2logink{margin:-5px 0 0 -5px;display:block;}
#login input{width:50%;height:40px;left:10px;border-radius:3px;border:1px;position:absolute;left:40px;font-size:14px;font-family:"微软雅黑";}
.submita{color:#FFF;background-color:#F00;width:50%;height:60px;border:0;font-size:20px;font-family:"微软雅黑";;border-radius:5px;border:1px;position:absolute;left:40px;top:250px;cursor:pointer;}
.submita:hover{background-color:#933;}
.dengluw{color:#000;font-family:"微软雅黑";position:absolute;left:50px;top:40px;font-size:20px;}
.checklogin{width:15px;height:15px;margin:5px 0 0 22px;cursor:pointer;}
.lonwen{font-size:7px;font-family:"微软雅黑";position:absolute;left:63px;top:205px;}
.wjimima{font-size:7px;font-family:"微软雅黑";position:absolute;right:280px;top:205px;text-decoration:underline;color:#666;cursor:pointer;}
.qqita{font-size:18px;font-family:"微软雅黑";position:absolute;right:130px;top:80px;}
.submitqi1{color:#FFF;background-color:#0CF;width:30%;height:30px;border:0;font-size:10px;font-family:"微软雅黑";;border-radius:5px;border:1px;position:absolute;right:42px;top:150px;cursor:pointer;}
.submitqi1:hover{background-color:#09F;}
.submitqi:hover{background-color:#CCC;}
.submitqi{color:#999;background-color:#FFF;width:30%;height:30px;border:0;font-size:10px;font-family:"微软雅黑";;border-radius:5px;border:1px;position:absolute;right:42px;top:200px;cursor:pointer;}
.zhuce1{font-size:10px;font-family:"微软雅黑";position:absolute;right:98px;top:280px;}
.zhuce{font-size:10px;font-family:"微软雅黑";position:absolute;right:36px;top:280px;text-decoration:underline;cursor:pointer;color:#999;}
#imgslog{position:absolute;right:8px;top:8px;}
</style>
<body>
<form>
<input type="submit" value="登   录" id="denglu">
</form>
<div id="ologin">
<form id="login">
<br /><br />
<span class="dengluw">登 录</span><br><br><br />
<input type="text" class="loginput"><br /><br /><br />
<input type="password" class="logpsd" /><br><br /><br />
</form>
<form class="checklogin">
<input type="checkbox" class="checklogin"></form>
<span class="lonwen">记住密码</span>
<span class="wjimima">忘记密码？</span>
<input type="submit" value="登   录" class="submita">
<span class="qqita">其他方式登录:</span>
<form>
<input type="submit" value="QQ快捷登录" class="submitqi1"><br><br>
<input type="submit" value="微信快捷登录" class="submitqi">
<img src="close.png" width="30" height="30" id="imgslog">
</form>
<span class="zhuce1">没有账号，</span>
<span class="zhuce">快速注册！</span>
</div>
<script type="text/javascript">
window.onload = function(){
var Obtn = document.getElementById('denglu');
var Ologin = document.getElementById('ologin');
//获取页面高度
var sHeight = document.body.scrollHeight;
//点击登录按钮出现遮罩层和登录框
Obtn.onclick = function(){
var oMask = document.createElement("div");
oMask.id="mask";
oMask.style.height=sHeight + "px";
document.body.appendChild(oMask);
Ologin.style.display='block';
var oClose=document.getElementById('imgslog');
oMask.onclick=oClose.onclick=function(){
document.body.removechild(oMask);
Ologin.style.display="none";
}
}
}
</script>
</body>
</html>
堂堂堂堂糖糖糖童鞋
相关分类