ok，先来贴几张张效果图。
其中大致流程是用户点击页面右上角的登录链接接着弹出div模拟窗口，该窗口通过iframe调用Login.aspx页面，用户输入用户名
密码和验证码后，Login.aspx页面的jQuery代码post到Login.ashx页面处理，Login.ashx页面可以算是简易的aspx页面吧。
当然你用LoginProcess.aspx 也是可以的。Login.ashx页面处理完把结果返回给Login.aspx页面处理，result变量用与接收结果。
如果返回1表示登录成功，则关闭模拟窗口。
主页面调用代码片段：
复制代码 代码如下:
<asp:HyperLink runat="server" NavigateUrl="#" >登录</asp:HyperLink>
<script language="javascript" type="text/javascript">
$('#<%=this.lnkLogin.ClientID %>').click(
function(){
jBox.open('iframe-jBoxID','iframe','Login.aspx','用户登录
','width=400,height=250,center=true,draggable=true,model=true');
} );
</script>
Login.aspx代码：
复制代码 代码如下:
<form onsubmit="return false;">
<table>
<tr>
<td>学号：</td>
<td><input type="text"
maxlength="9" onblur="checkUserName()"/><span></span>
</td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password"
onblur="checkUserPwd()" /><span></span>
</td>
</tr>
<tr>
<td>验证码：</td>
<td><input type="text" maxlength="5"
id="txtCheckCode" onblur="checkCheckCode()"/><span>
</span>
</td>
</tr>
<tr>
<td></td>
<td><div>输入下图中的字符，不区分大小写</div><br />
<img src="https://www.jb51.net/CheckCode.aspx" alt="验证码" />
<a href="#">看不清，换一张</a></td>
</tr>
<tr>
<td></td>
<td><input type="image" src="https://www.jb51.net/App_Themes/Images/btn_login.jpg"
alt="马上登录"/></td>
</tr>
</table>
</form>
jQuery代码：
复制代码 代码如下:
<script language="javascript" type="text/javascript" >
$(document).ready(function(){
// 验证码更新
$('#change_image').click(
function(){
$('#imgCheckCode').attr('src','CheckCode.aspx?'+Math.random());
});
//关键的代码
$("#btnLogin").click(function(){
if(checkUserName() && checkUserPwd() && checkCheckCode())
{
var data = {
UserName: $('#txtUserName').val(),
UserPwd: $('#txtUserPwd').val(),
CheckCode: $('#txtCheckCode').val()
};
//提交数据给Login.ashx页面处理
$.post("Ajax/Login.ashx",data,function(result){
if(result == "1") //登录成功
{
alert("登录成功！您可以进行其他操作了！");
// 关闭模拟窗口
window.parent.window.jBox.close();
}
else if(result == "2") //验证码错误
{
$('#txtCheckCode').next("span").css("color","red").text("*
验证码错误");
}
else
{
alert("登录失败！请重试");
}
});
}
else
{
checkUserName();
checkUserPwd();
checkCheckCode();
}
});
});
//check the userName
function checkUserName()
{
if($("#txtUserName").val().length == 0)
{
$("#txtUserName").next("span").css("color","red").text("*用户名不为空");
return false;
}
else
{
var reg = /^\d{9}$/;
if(!reg.test($('#txtUserName').val()))
{
$('#txtUserName').next("span").css("color","red").text("*正确的格式
如：030602888");
return false;
}
else
{
$("#txtUserName").next("span").css("color","red").text("");
return true;
}
}
}
//check the pwd
function checkUserPwd()
{
if($('#txtUserPwd').val().length == 0)
{
$('#txtUserPwd').next("span").css("color","red").text("*密码不为空");
return false;
}
else
{
$('#txtUserPwd').next("span").css("color","red").text("");
return true;
}
}
// check the check code
function checkCheckCode()
{
if($('#txtCheckCode').val().length == 0)
{
$('#txtCheckCode').next("span").css("color","red").text("*验证码不为空");
return false;
}
else
{
$('#txtCheckCode').next("span").css("color","red").text("");
return true;
}
}
</script>
Login.ashx代码：
复制代码 代码如下: