아래에서는 Thickbox와 CSS를 사용하여 교내 로그인(등록) 상자를 구현하는 방법을 공유하겠습니다. -----》렌더링은 다음과 같습니다. 방법은 매우 간단합니다. Thickbox의 iframe 모드를 사용하여 다른 페이지를 중첩한 다음 이 페이지에 ajax를 작성하여 해당 기능을 구현하면 됩니다. 코드: 등록: regUser.html 코드 복사 코드는 다음과 같습니다. <br>$().ready(function () { <br>var verify = 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>성공: 함수(msg) { <br>if (msg == "성공") { <br>//인증 통과<br>validate = true <br>$('#username').css("display", "none") <br>}; 🎜>if ( msg == "fail") { <br>validate = false; //인증 통과 실패<br>//alert("사용자 이름이 중복되었습니다!") <br>$('#username'); css(" 디스플레이", "인라인"); <br>} <br>}) <br>}) <br>$('#createUser').click(function () { <br>if ( $('#userid').val() == "") { <br>validate = false <br>alert("사용자 이름은 비워둘 수 없습니다!") <br>return; <br>if ($('#userpwd').val() == "") { <br>validate = false <br>alert("비밀번호는 비워둘 수 없습니다!") <br>return; >} <br>if ($('#email').val() == "") { <br>validate = false <br>alert("이메일은 비워둘 수 없습니다! "); <br>return; <br>} <br>if (!isEmail($('#email').val())) { <br>validate = false; <br>alert("이메일 형식은 다음과 같습니다. 정확하지 않음! "); <br>return; <br>} <br>if (유효성 확인) { <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 == "실패") { <br>alert("등록 실패!") <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>< ;/ 스크립트> <br><div class="box" style="width:280px ; height:230px;"> <br><h1> <br>등록<br><p> ; <br>새 사용자이신가요? 지금 등록하세요 <br><label><span>/span> 🎜><input type="text" id="userid" class="input-text" /> <br><b id="username" style="display:none; color:Red; 디스플레이 :none ">사용할 수 없음</b> <br></label> <br><label> <br><span>이메일</span> <br><input type=" text" id ="email" class="input-text" /> <br><label><span>password</span> 비밀번호" id="userpwd" class="input-text" /> <br></label> <br></form> <br><div class="spacer"> <br>< ;a href="#" id="createUser" class="green">새 계정 만들기</a></div> <br><div class="spacer">이미 등록되었습니다. , 로그인으로 돌아가기<br></div><br><br> <br>사용자 로그인: <br><br><br><br><br>코드 복사 <br><br><br> 코드는 다음과 같습니다. <br><div class="codebody" id="code71977"> <br><link type="text/css" rel="Stylesheet" href="css/login.css" /> <br><link type="text/css" rel="스타일시트 " href="css/thickbox.css" /> <br><script type="text/javascript" src="js/jquery-1.3.2.js"> < ;script type="text/javascript" src="js/thickbox.js"> () { <br>//사용자 로그인에 ajax 사용, 로그인에 성공하면 세션 쓰기 <br>$('#userLogin').click(function () { <br>if ($('#userid ') .val() == "" || $('#userpwd').val() == "") { <br>alert("사용자 이름 또는 비밀번호는 비워둘 수 없습니다!") <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 == "성공 " ) { <br>//alert('로그인 성공'); <br>//document.location.href = "Default.aspx"; <br>$('#divLogin').css("display", " 없음"); <br>var Welcome = "환영합니다" $('#userid').val() ",<a href='Ajax/CommonAjax.aspx?action=logout'>종료</a> "; <br>$('#tempInfo').css("표시", "차단"); <br>$('#tempInfo').html(환영); <br>} <br>if (msg == "실패") { <br>alert("로그인에 실패했습니다! "); <br>} <br>} <br>}); <br>} <br>}); <br>}); <br> <%if (Session["User"] == null) { %> > 로그인 계정 비밀번호 class="spacer"> 로그인 비밀번호를 잊으셨나요? class="thickbox" style="color: #0033CC; background: #dfe4ee;">비밀번호 검색 아직 등록되지 않았습니다. ? style="color: #0033CC; background: #dfe4ee;" class="thickbox"> ;등록 <%} 그 외 { %> 환영합니다. <%=Session["User"].ToString() %>, 종료< /a> <%} %> /div> 위에 관련된 CSS 파일과 Ajax 처리 페이지는 다음과 같습니다. reg.css, login.css, UserAjax.rar 패키지 다운로드 주소 thickbox 관련 정보는 공식 홈페이지에 접속하시면 다운로드 받으실 수 있습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
