下面将我用thickbox和css实现校内登录(注册)框与大家分享下-----》效果图如下: 方法很简单,就是用thickbox的iframe模式,将另一个页面嵌套即可,然后在这个页面里写ajax来实现相应的功能。 代码: 注册:regUser.html 复制代码 代码如下: <BR>$().ready(function () { <BR>var validate = true; <BR>//检查用户名是否可用 <BR>$('#userid').blur(function () { <BR>$.ajax({ <BR>type: "POST", <BR>url: "Ajax/UserAjax.aspx?action=check", <BR>data: "userid=" + escape($('#userid').val()), <BR>success: function (msg) { <BR>if (msg == "success") { <BR>//通过验证 <BR>validate = true; <BR>$('#username').css("display", "none"); <BR>} <BR>if (msg == "fail") { <BR>validate = false; //没有通过验证 <BR>//alert("用户名重名!"); <BR>$('#username').css("display", "inline"); <BR>} <BR>} <BR>}); <BR>}); <BR>$('#createUser').click(function () { <BR>if ($('#userid').val() == "") { <BR>validate = false; <BR>alert("用户名不能为空!"); <BR>return; <BR>} <BR>if ($('#userpwd').val() == "") { <BR>validate = false; <BR>alert("密码不能为空!"); <BR>return; <BR>} <BR>if ($('#email').val() == "") { <BR>validate = false; <BR>alert("Email不能为空!"); <BR>return; <BR>} <BR>if (!isEmail($('#email').val())) { <BR>validate = false; <BR>alert("Email格式不正确!"); <BR>return; <BR>} <BR>if (validate) { <BR>$.ajax({ <BR>type: "POST", <BR>url: "Ajax/UserAjax.aspx?action=reg", <BR>data: "userid=" + escape($('#userid').val()) + "&userpwd=" + escape($('#userpwd').val()) + "&email=" + escape($('#email').val()), <BR>success: function (msg) { <BR>if (msg == "success") { <BR>alert("注册成功"); <BR>} <BR>if (msg == "fail") { <BR>alert("注册失败!"); <BR>} <BR>} <BR>}); <BR>} <BR>}); <BR>}); <BR>function isEmail(str) { <BR>var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/; <BR>return reg.test(str); <BR>} <BR> 注册 新用户?马上注册 用户名 不可用 E-mail 密码 创建新的账号 已经注册过,返回登录 返回登录 用户登录: 复制代码 代码如下: <BR>$().ready(function () { <BR>//使用ajax进行用户登录,如果登录成功则写入session <BR>$('#userLogin').click(function () { <BR>if ($('#userid').val() == "" || $('#userpwd').val() == "") { <BR>alert("用户名或密码不能为空!"); <BR>} <BR>else { <BR>$.ajax({ <BR>type: "POST", <BR>url: "Ajax/UserAjax.aspx?action=login", <BR>data: "userid=" + escape($('#userid').val()) + "&userpwd=" + escape($('#userpwd').val()), <BR>success: function (msg) { <BR>if (msg == "success") { <BR>//alert('登录成功'); <BR>//document.location.href = "Default.aspx"; <BR>$('#divLogin').css("display", "none"); <BR>var welcome = "欢迎" + $('#userid').val() + ",<a href='Ajax/CommonAjax.aspx?action=logout'>退出"; <BR>$('#tempInfo').css("display", "block"); <BR>$('#tempInfo').html(welcome); <BR>} <BR>if (msg == "fail") { <BR>alert("登录失败!"); <BR>} <BR>} <BR>}); <BR>} <BR>}); <BR>}); <BR> { %> 登 录 账号 密码 登 录 忘记密码? class="thickbox" style="color: #0033CC; background: #dfe4ee;">找回密码 还没有注册? style="color: #0033CC; background: #dfe4ee;" class="thickbox">注册 else { %> 欢迎, ,退出 以上涉及到的css文件和ajax处理页面如下: reg.css,login.css,UserAjax.rar 打包下载地址 至于thickbox的相关资料可以去官方网站去下载