jquery+thickbox 기반 학교 내 로그 인 등록 상자

다음은 저 를 thickbox 와 css 로 교 내 로그 인(등록)상자 로 여러분 과 공유 하 겠 습 니 다-효과 도 는 다음 과 같 습 니 다.코드:등록:regUser.html

 
<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> 

사용자 로그 인:

 
<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("    ！"); 
} 
} 
}); 
} 
}); 
}); 
</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">&nbsp;   &nbsp;  &nbsp;</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> 

이상 관련 된 css 파일 과 ajax 처리 페이지 는 다음 과 같 습 니 다.reg.css,login.css,UserAjax.rar패키지 다운로드 주소thickbox 에 관 한 자 료 는 공식 사이트 에서 다운로드 할 수 있 습 니 다.