基于jquery+thickbox仿校内登录注册框_jquery



下面将我用thickbox和css实现校内登录（注册）框与大家分享下-----》效果图如下：



方法很简单，就是用thickbox的iframe模式，将另一个页面嵌套即可，然后在这个页面里写ajax来实现相应的功能。
代码：
注册：regUser.html
代码如下:



$().ready(function () {
var validate = true;
//检查用户名是否可用
$('#userid').blur(function () {
$.ajax({
type: "POST",
url: "Ajax/UserAjax.aspx?action=check",
data: "userid=" + escape($('#userid').val()),
success: function (msg) {
if (msg == "success") {
//通过验证
validate = true;
$('#username').css("display", "none");
}
if (msg == "fail") {
validate = false; //没有通过验证
//alert("用户名重名！");
$('#username').css("display", "inline");
}
}
});
});
$('#createUser').click(function () {
if ($('#userid').val() == "") {
validate = false;
alert("用户名不能为空！");
return;
}
if ($('#userpwd').val() == "") {
validate = false;
alert("密码不能为空！");
return;
}
if ($('#email').val() == "") {
validate = false;
alert("Email不能为空！");
return;
}
if (!isEmail($('#email').val())) {
validate = false;
alert("Email格式不正确！");
return;
}
if (validate) {
$.ajax({
type: "POST",
url: "Ajax/UserAjax.aspx?action=reg",
data: "userid=" + escape($('#userid').val()) + "&userpwd=" + escape($('#userpwd').val()) + "&email=" + escape($('#email').val()),
success: function (msg) {
if (msg == "success") {
alert("注册成功");
}
if (msg == "fail") {
alert("注册失败！");
}
}
});
}
});
});
function isEmail(str) {
var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
return reg.test(str);
}

注册

新用户？马上注册

创建新的账号

已经注册过，返回登录 返回登录



用户登录：
代码如下:





$().ready(function () {
//使用ajax进行用户登录，如果登录成功则写入session
$('#userLogin').click(function () {
if ($('#userid').val() == "" || $('#userpwd').val() == "") {
alert("用户名或密码不能为空！");
}
else {
$.ajax({
type: "POST",
url: "Ajax/UserAjax.aspx?action=login",
data: "userid=" + escape($('#userid').val()) + "&userpwd=" + escape($('#userpwd').val()),
success: function (msg) {
if (msg == "success") {
//alert('登录成功');
//document.location.href = "Default.aspx";
$('#divLogin').css("display", "none");
var welcome = "欢迎" + $('#userid').val() + ",退出";
$('#tempInfo').css("display", "block");
$('#tempInfo').html(welcome);
}
if (msg == "fail") {
alert("登录失败！");
}
}
});
}
});
});


<%if (Session["User"] == null)
{ %>

登 录

text-decoration: none"> 登 录

忘记密码? class="thickbox" style="color: #0033CC; background: #dfe4ee;">找回密码

还没有注册? style="color: #0033CC; background: #dfe4ee;" class="thickbox">注册


<%}
else
{ %>

欢迎, <%=Session["User"].ToString() %>，退出

<%} %>



以上涉及到的css文件和ajax处理页面如下：
reg.css，login.css，UserAjax.rar 打包下载地址
至于thickbox的相关资料可以去官方网站去下载