论坛徽章:: 6

电梯直达

1楼 [收藏(0)] [报告]

发表于 2013-09-26 15:41 |只看该作者 |倒序浏览

<!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>登录表单DEMO</title>
<style type="text/css">
body{margin:0;padding:0}
#login_form{width:400px;border:3px solid gray;display:none;position:absolute;z-index:9999;background:white}
.entry{height:30px;padding:10px}
.entry label{width:100px;display:inline-block;height:20px;padding:5px;vertical-align:middle}
.input_field{vertical-align:middle;width:200px;height:20px;border:1px solid gray;outline:none;font-size:20px;line-height:20px;padding:5px}
.login_title{height:20px; padding:10px}
.login_title span{color:gray;float:left;height:20px;display:block;font-size:20px}
.login_title a{display:block; height:20px; width:20px;line-height:20px;float:right;text-decoration:none;outline:none;color:white;background:gray;text-align:center}
.login_title a:hover{background:#FF8040}
.input_hint{color:gray;font-style:italic;font-weight:normal; font-size:14px}
.input_btn{width:100px; height:30px;text-decoration:none;outline:none;background:gray;display:inline-block;line-height:30px;text-align:center;color:white;font-weight:bold;font-size:20px}
.input_btn:hover{background:#FF8040}
</style>
</head>
<body>
<br>
<a href="javascript:void(0);" id="login">登录</a>
<div id="login_form">
<div class="login_title">
<span>用户登录</span>
<a href="#" id="close_btn" title="关闭">X</a>
</div>
<div style="clear:both"></div>
<form action="#" method="post">
<div class="entry">
<label for="username">用户名：</label>
<input class="input_field input_hint" type="text" id="username" name="username" value="用户名/电子邮箱" />
</div>
<div class="entry">
<label for="passwd">密码：</label>
<input class="input_field" type="password" id="passwd" name="passwd" value="" />
</div>
<div class="entry">
<a class="input_btn" href="#" id="login_btn" name="login_btn"> 登录 </a>
</div>
</form>
</div>
</body>
<script type="text/javascript">
var a_login = document.getElementById('login');
var username = document.getElementById('username');
var close_btn = document.getElementById('close_btn');
//关闭按钮
close_btn.href = 'javascript:void(0);';
close_btn.onclick = function() {
document.getElementById('login_form').style.display = 'none';
}
//用户名框的onfocus和onblur特效
username.onfocus = function() {
if(this.value == '用户名/电子邮箱') {
this.value = '';
this.className = 'input_field';
}
}
username.onblur = function() {
if(this.value == '') { //没做trim
this.className = this.className + ' input_hint';
this.value = '用户名/电子邮箱';
}
}
//点击登录按钮，显示登录框
a_login.onclick = function() {
var login_form = document.getElementById('login_form');
//BODY宽度
var docWidth = document.documentElement.clientWidth;
//BODY高度
var docHeight = document.documentElement.clientHeight;
//计算中心位置（这里直接使用了固定宽高，还有一个小问题就是当浏览器放大和缩小时不会自动居中）
login_form.style.top = Math.floor(((docHeight - 300)/2)) + 'px';
login_form.style.left = Math.floor(((docWidth - 400)/2)) + 'px';
login_form.style.display = 'block';
}
</script>
</html>