아래에서는 Thickbox와 CSS를 사용하여 교내 로그인(등록) 상자를 구현하는 방법을 공유하겠습니다. -----》렌더링은 다음과 같습니다. 방법은 매우 간단합니다. Thickbox의 iframe 모드를 사용하여 다른 페이지를 중첩한 다음 이 페이지에 ajax를 작성하여 해당 기능을 구현하면 됩니다. 코드: 등록: regUser.html

코드 복사 코드는 다음과 같습니다. $().ready(function () { var verify = true; //사용자 이름이 사용 가능한지 확인 $('#userid').blur(function () { $.ajax({ type: "POST", url: "Ajax/UserAjax .aspx?action=check", data: "userid=" escape($('#userid').val()), 성공: 함수(msg) { if (msg == "성공") { //인증 통과 validate = true $('#username').css("display", "none") }; 🎜>if ( msg == "fail") { validate = false; //인증 통과 실패 //alert("사용자 이름이 중복되었습니다!") $('#username'); css(" 디스플레이", "인라인"); } }) }) $('#createUser').click(function () { if ( $('#userid').val() == "") { validate = false alert("사용자 이름은 비워둘 수 없습니다!") return; if ($('#userpwd').val() == "") { validate = false alert("비밀번호는 비워둘 수 없습니다!") return; >} if ($('#email').val() == "") { validate = false alert("이메일은 비워둘 수 없습니다! "); return; } if (!isEmail($('#email').val())) { validate = false; alert("이메일 형식은 다음과 같습니다. 정확하지 않음! "); return; } if (유효성 확인) { $.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 == "실패") { 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) } &lt ;/ 스크립트> 등록 ; 새 사용자이신가요? 지금 등록하세요 /span> 🎜> 사용할 수 없음 이메일 password 비밀번호" id="userpwd" class="input-text" /> &lt ;a href="#" id="createUser" class="green">새 계정 만들기 이미 등록되었습니다. , 로그인으로 돌아가기

사용자 로그인:

코드 복사

코드는 다음과 같습니다. &lt ;script type="text/javascript" src="js/thickbox.js"> () { //사용자 로그인에 ajax 사용, 로그인에 성공하면 세션 쓰기 $('#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 == "성공 " ) { //alert('로그인 성공'); //document.location.href = "Default.aspx"; $('#divLogin').css("display", " 없음"); var Welcome = "환영합니다" $('#userid').val() ", 종료 "; $('#tempInfo').css("표시", "차단"); $('#tempInfo').html(환영); } if (msg == "실패") { alert("로그인에 실패했습니다! "); } } }); } }); }); { %> > 로그인 계정 width: 120px" class="input-text" / > 비밀번호 너비: 120px" class="input-text" /> class="spacer"> 텍스트 -장식: none"> 로그인 비밀번호를 잊으셨나요? class="thickbox" style="color: #0033CC; background: #dfe4ee;">비밀번호 검색

아직 등록되지 않았습니다. ? style="color: #0033CC; background: #dfe4ee;" class="thickbox"&gt ;등록 그 외 { %> 환영합니다. , 종료 /div>

위에 관련된 CSS 파일과 Ajax 처리 페이지는 다음과 같습니다. reg.css, login.css, UserAjax.rar 패키지 다운로드 주소

thickbox 관련 정보는 공식 홈페이지에 접속하시면 다운로드 받으실 수 있습니다.

jquery Thickbox 모방학교 로그인 등록 box_jquery 기반

로그인