一直觉得弹出登录对话框让用户登录要比单独跳转页面用户体验要好！今天找了点相关资料。但是这也不局限于弹出登录对话框这功能。
这里主要涉及到重点：
1：点击之后背景变暗
2：背景内容不能操作
3：关闭或者登录成功后恢复
4:弹出框位置
<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<style type="text/css">
* {
margin:0;
padding:0;
font-size:12px;
font-weight:normal;
font-family:verdana, tahoma, helvetica, arial, sans-serif, "宋体";
font-style:normal;
list-style-type:none;
text-decoration:none;
}
/*login*/
#loginbg{
display: none;
position: absolute;
top:0;
left:0;
z-index:200;
height:100%;
100%;
background: #000000;
filter:alpha(opacity=30);
-moz-opacity:0.3;
opacity:0.3;
}
#login {
position:absolute;
top:50%;
left:40%;
293px;
z-index:201;
background:#FFFFFF;
}
#login h2 input {
height:18px;
18px;
float:right;
border:none;
cursor:pointer;
margin:2px 6px 0 0;
}
#login h2 a {
display:block;
float:left;
83px;
height:26px;
line-height:26px;
text-align:center;
text-decoration:none;
color:#666;
}
#login h2 a.cur {
color:#f00;
}
#login ul {
padding:14px 0 18px 12px;
}
#login ul li {
padding-left:60px;
margin-top:10px;
display:inline-block;
}
#login ul li {
display:block;
}
#login ul li:after {
content:"youdian";
clear:both;
display:block;
height:0;
visibility:hidden;
}
#login ul li tt {
float:left;
60px;
margin-left:-70px;
text-align:right;
line-height:22px;
color:#444;
}
#login ul li div input.cell, #login ul li div input.cell2 {
height:16px;
padding:2px;
line-height:16px;
179px;
border:1px #dcdcdc solid;
color:#666;
}
#login ul li div input.cell2 {
50px;
}
#login ul li div label {
color:#666;
cursor:pointer;
}
#login ul li div img {
margin-bottom:-7px;
margin-left:8px;
}
* html #login ul li div img {
margin-bottom:-4px;
}
*+html #login ul li div img {
margin-bottom:-4px;
}
#login ul li div input#fnlogin {
59px;
height:21px;
cursor:pointer;
border:none;
margin-right:15px;
}
#login ul li p {
padding-top:4px;
color:#f00;
}
</style>
</head>
<body>
<hr>
<a href="#" onClick="open_login()" style="font-size:24px;">登陆|</a>
<div id="loginbg"></div>
<div id="login" style="display:none;">
<h2>
<input id="close_login" type="button" title="退出登录" value="x" onClick="close_login()" />
<a name="用户名">用户名登录</a>
</h2>
<ul>
<form id="LoginForm" name="LoginForm" action="" method="post" enctype="multipart/form-data" >
<li>
<input id="loginType" name="loginType" type="hidden"/>
<tt><label id="logtype" for="email">用户名:</label></tt>
<div><input id="username" name="username" type="text"/></div>
</li>
<li>
<tt><label for="password">密 码:</label></tt>
<div><input id="password" name="password" type="password" /></div>
</li>
<li>
<tt></tt>
<div><input id="reme" name="reme" type="checkbox" /><label for="reme">下次自动登录</label>
</div>
</li>
<li>
<tt></tt>
<div><input id="fnlogin" type="button" value="登陆"/><a href="#">忘记密码</a></div>
</li>
</form>
</ul>
</div>
<script language="javascript">
function open_login() {
document.getElementById('loginbg').style.display = 'block';
document.getElementById('login').style.display = 'block';
showloginbg();
}
function close_login() {
document.getElementById('loginbg').style.display = 'none';
document.getElementById('login').style.display = 'none';
}
function showloginbg() {
var sWidth, sHeight;
sWidth = screen.width;
sWidth = document.body.offsetWidth;
sHeight = document.body.offsetHeight;
if (sHeight < screen.height) { sHeight = screen.height; }
document.getElementById("loginbg").style.width = sWidth + "px";
document.getElementById("loginbg").style.height = sHeight + "px";
document.getElementById("loginbg").style.display = "block";
document.getElementById("loginbg").style.display = "block";
document.getElementById("loginbg").style.right = document.getElementById("login").offsetLeft + "px";
}
function logo_in() {
alert()
//验证
//转向...
//myform.action=""
//myform.submit()
close_login();
};
</script>
</body>
</html>