>

thickbox仿校内登陆注册框

- 编辑:www.bifa688.com -

thickbox仿校内登陆注册框

首先,html代码

下边将作者用thickbox和css实现校内登陆(注册)框与咱们享用下-----》效果图如下:
必发88官网 1
必发88官网 2
必发88官网 3
方法很轻巧,就是用thickbox的iframe情势,将另三个页面嵌套就可以,然后在那个页面里写ajax来落到实处相应的职能。
代码:
注册:regUser.html

复制代码 代码如下:

复制代码 代码如下:

<div style="display:none;"><iframe id="compareIframe" src=""></iframe></div>

<link type="text/css" href="css/reg.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
$().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);
}
</script>
<div class="box" style="width:280px ; height:230px;">
<h1>
注册</h1>
<p>
新顾客?霎时注册</p>
<form action="" method="post">
<label>
<span>用户名</span>
<input type="text" id="userid" class="input-text" />
<b id="username" style="display:none; color:Red; display:none">不可用</b>
</label>
<label>
<span>E-mail</span>
<input type="text" id="email" class="input-text" />
</label>
<label>
<span>密码</span>
<input type="password" id="userpwd" class="input-text" />
</label>
</form>
<div class="spacer">
<a href="#" id="createUser" class="green">创制新的账号</a></div>
<div class="spacer">
曾经登记过,重临登陆 <a href="#" onclick="parent.tb_remove()">重返登陆</a>
</div>
</div>

js代码

用户登入:

复制代码 代码如下:

复制代码 代码如下:

var compareContent=”你要转移的值";
if (compareContent != "") {
document.getElementById("compareIframe").src = "ajax/changeSession.aspx?compareInfo=" compareContent;
}
ajax:
changeSession.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
Session["compare"] = Request.QueryString["compareInfo"];
}
//end
//<a href=”;

<link type="text/css" rel="Stylesheet" href="css/login.css" />
<link type="text/css" rel="Stylesheet" href="css/thickbox.css" />
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
<script type="text/javascript">
$().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() ",<a href='Ajax/CommonAjax.aspx?action=logout'>退出</a>";
$('#tempInfo').css("display", "block");
$('#tempInfo').html(welcome);
}
if (msg == "fail") {
alert("登入战败!");
}
}
});
}
});
});
必发88官网,</script>
<!--登陆区域-->
<%if (Session["User"] == null)
{ %>
<div class="box" id="divLogin">
<h1>
登 录</h1>
<form action="" method="post">
<label>
<span>账号</span>
<input type="text" name="email" id="userid" style="height: 20px; font-size: 16px;
width: 120px" class="input-text" />
</label>
<label>
<span>密码</span>
<input type="password" name="psw" id="userpwd" style="height: 20px; font-size: 16px;
width: 120px" class="input-text" />
</label>
</form>
<div class="spacer">
<a href="javascript:;" id="userLogin" class="green" style="background: #67a54b; color: #FFFFFF;
text-decoration: none">  登  录  </a></div>
<div class="spacer">
忘记密码? <a href="FindPwd.htm?KeepThis=true&TB_iframe=true&height=250&width=300&modal=true"
class="thickbox" style="color: #0033CC; background: #dfe4ee;">找回密码</a><br />
还一直不登记? <a href="UserReg.htm?KeepThis=true&TB_iframe=true&height=250&width=350&modal=true"
style="color: #0033CC; background: #dfe4ee;" class="thickbox">注册</a>
</div>
</div>
<%}
else
{ %>
<div id="divUserInfo" style=" height:80px;">
欢迎, <%=Session["User"].ToString() %>,<a href="Ajax/CommonAjax.aspx?action=logout">退出</a>
</div>
<%} %>
<div id="tempInfo" style="height:80px; display:none">
</div>

: 复制代码 代码如下: div style="display:none;"iframe id="compareIframe" src=""/iframe/div js代码 : 复制代码 代码如下: var compareContent=”...

上述提到到的css文件和ajax管理页面如下:
reg.css,login.css,UserAjax.rar 打包下载地址
有关thickbox的连锁材质能够去官网去下载

方法极粗略,便是用thickbox的iframe模式,将另三个页面嵌套...

本文由必发88官网发布,转载请注明来源:thickbox仿校内登陆注册框