jquery登陆弹框
<!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>
<title>mydream_后台登录</title>
<style type="text/css">
.login {
border: solid 3px #CCC;
width: 360px;
height: 256px;
display: none;
z-index: 101;
position: absolute;
background-color: #EEEEEE;
}
.login .title {
width: 100%;
height: 30px;
line-height: 30px;
border-bottom: solid 1px #CCC;
}
.login .title b {
padding-left: 5px;
color: #000000;
}
.login .pad {
padding-left: 35px;
}
.login .divCode {
width: 80px;
height: 30px;
position: relative;
top: -32px;
left: 170px;
display: none;
}
.login #btnLogin {
width: 55px;
height: 28px;
}
#greybackground {
background: #000000;
width: 100%;
display: block;
z-index: 100;
top: 0px;
left: 0px;
position: absolute;
}
</style>
<script src="Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var screenwidth, screenheight, mytop, getPosLeft, getPosTop;
screenwidth = $(window).width();
screenheight = $(window).height();
mytop = $(document).scrollTop();
getPosLeft = screenwidth / 2 - 200;
//计算弹出层的top
getPosTop = screenheight / 2 - 150;
//css定位弹出层
$("#login").css({ "left": getPosLeft, "top": getPosTop });
//当浏览器窗口大小改变时
$(window).resize(function () {
screenwidth = $(window).width();
screenheight = $(window).height();
mytop = $(document).scrollTop();
getPosLeft = screenwidth / 2 - 200;
getPosTop = screenheight / 2 - 150;
$("#login").css({ "left": getPosLeft, "top": getPosTop + mytop });
});
//当拉动滚动条时，弹出层跟着移动
$(window).scroll(function () {
screenwidth = $(window).width();
screenheight = $(window).height();
mytop = $(document).scrollTop();
getPosLeft = screenwidth / 2 - 200;
getPosTop = screenheight / 2 - 150;
$("#login").css({ "left": getPosLeft, "top": getPosTop + mytop });
});
//失去焦点与得到焦点
$("#txtCode").focus(function () {
$(".divCode").fadeIn(1200);
});
$("#txtCode").blur(function () {
$(".divCode").fadeOut();
});
// $("#login").fadeIn("slow"); //toggle("slow");
//获取页面文档的高度
var docheight = $(document).height();
//追加一个层，使背景变灰
$("body").append("<div id='greybackground'></div>");
// $("#greybackground").css({ "opacity": "0.1", "height": docheight });
//登录
$("#btnLogin").click(function () {
$.get("../ashx/login.ashx",
{
name: $("#txtName").val(),
pwd: encodeURIComponent($("#txtPassword").val()),
code: $("#txtCode").val()
},
function (data) {
switch (data) {
case "code error":
alert("验证码错误！");
break;
case "success":
alert("登录成功！");
break;
case "false":
alert("登录失败！");
break;
default:
alert("数据加载失败，请稍后再试！");
break;
}
});
});
});
function dd() {
$("#login").fadeIn("slow");
}
</script>
</head>
<body style="
<div onclick="dd()">fff</div>
<div id="login" class="login" style="display: none">
<div class="pad">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" align="left">
<table cellspacing="2" cellpadding="2" style="border:solid 0px #ccc;">
<tr>
<td width="100" height="30" align="right">热线号码：</td>
<td align="left"><input type="text" value="" id="hotLine" /></td>
</tr>
<tr>
<td width="100" height="30" align="right">座席号：</td>
<td align="left"><input type="text" value="" id="cno" /></td>
</tr>
<tr>
<td width="100" height="30" align="right">密码：</td>
<td align="left"><input type="text" value="" id="pwd" /></td>
</tr>
<tr>
<td width="100" height="30" align="right">绑定电话：</td>
<td align="left"><input type="text" value="" id="bindTel" /></td>
</tr>
<tr>
<td width="100" height="30" align="right">电话类型：</td>
<td align="left">
<span style="float:left">
<select id="bindType">
<option value="1" selected=selected>电话号码</option>
<option value="2">分机号码</option>
<option value="3">软电话</option>
</select>
</span>
<span style="display:none; float:left;" id="sipSpan">软电话IP：<input id="sipIp" type="text" value="" />软电话密码：<input id="sipPwd" type="text" value="" /></span>
</td>
</tr>
<tr>
<td width="0" align="right" height="30">初始状态：</td>
<td align="left">
<select id="initStatus">
<option value="online">空闲</option>
<option value="pause">置忙</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" height="30" align="center">
<input type="button" value="登陆" onclick="login()" />
<input type="button" value="退出" onclick="logout()" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="divCode"><img alt="验证码" title="点击刷新验证码" src="../ashx/verifyCode.ashx" /></div>
</div>
</body>
</html>
