최근 프로젝트 요구 사항에 액세스 제어가 포함되는 프로젝트를 만들었습니다. 로그인을 사용해야하는 페이지 또는 기능에 액세스하면 로그인 상자가 나타납니다.
효과는 다음과 같습니다.
그림 1- 사용자 이름을 클릭하면 로그인하지 않은 경우 로그인 상자가 나타납니다.
이 기능에 대한 자세한 설명 :
로그인이 참여하지 않으면 로그인 상자가 숨겨져 있습니다.
로그인하면 로그인 상자가 페이지의 왼쪽 상단에 나타납니다.
로그인이 성공한 후 로그인 상자가 숨겨져 있습니다
구현 아이디어 :
포지셔닝 방법이 절대적이라고 가정하면 Body End 태그 앞에 로그인 된 div를 삽입하고 위치가 왼쪽 상단에 있다고 가정합니다.
로그인 박스의 기본 표시 속성은 없음입니다. 로그인이 트리거되면 속성을 차단하도록 변경하십시오
샘플 코드와 함께 첨부 :
<! docType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> 제목 </title> </head> <style> h3 {width : 100%; Padding-bottom : 10px; Border-Bottom : 2PX Solid #CCC;} {Close {reight; 2PX; span {패딩 : 3px 10px; 배경색 : #999; font-size : 20px; color : 흰색; 커서 : 포인터;} #log {display : none; 너비 : 400px; 높이 : 400px; 패딩 : 30px 40px; 배경색 : #f3f5f6; 위치 : 고정; 상단 : 70px ;; 오른쪽 : 30px;} .Error {float : right; color : 빨간색; font-size : 1.2em; 마진-오른쪽 : 10px} </style> <link rel = "stylesheet"href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <scripp src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js">/script> <script src ="// cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js">/script> <body><<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< <buctton onclick = "document.getElementById ( 'log'). style.display = 'block'"> 로그인 상자 팝업 </butty> <div id = "log"> <form action = "../ control/logincheck.php"method = "post"> <h3> 로그인 </h3> <div> < "userName"> <입력 유형 = "text"name = "username"id = "username"placeholder = "username"onblur = 'checkname ()'required/> </div> <div> <label for = "password"> password*</label> <span id = "psword"> </span> <input type = "password"id = "placeholder ="placeholder = "placeholdor /> </div> <div> <labe> <label> <span> <입력 유형 = "checkbox"value = 'true'> 기억 나라 </span> </label> </div> <입력 유형 = "제출"value = "로그인"/> <p> <a href = "register.html">>> >> >> 등록으로 이동 </a> </p> </form> <div id = "close"> <span onclick = "document.getElementByid ( 'log'). style.display = 'none' '"> close </span </div> </div> <cript> var checkname = function () {document.getElementById ( "user") "; var name = eval (document.getElementById ( 'username')). 값; if (name.length> 20 || name.length <1) document.getElementById ( "사용자"). innerHtml = "사용자 이름 길이는 1-20입니다!" ; } var checkPassword = function () {document.getElementById ( "psword"). innerHtml = ""; var name = eval (document.getElementById ( 'password')). 값; if (name.length> 12 || name.length <6) document.getElementById ( "psword"). innerHtml = "비밀번호 길이는 6-12 사이입니다!" ; } </script> </body> </html>검증을 구현하고 angularjs와 전적으로 프롬프트를 구현하는 방법 :
<! docType html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimgs/angular.js/1.4.6/angular.min.js"> </script> </head> <h2> verification </h2> <mypat " ng-controller = "validatectrl"name = "myform"novalidate> <p> username : <br> <input type = "text"name = "user"ng-model = "user"require> <span style = "color : red"ng-show = "myform.user. $ dirty && my form.user"> ng-show = "myform.user. $ error.required"> 사용자 이름이 필요합니다. </span> </span> </p> <p> 이메일 : <br> <input type = "email"name = "email"ng-model = "email"필수> <span style = "color : red"ng-show = "myform.email. $ dirty && myform.email. </span> <span ng-show = "myform.email. $ error.email"> 불법 이메일 주소. </span> </span> </p> <p> <입력 유형 = "제출"ng-disabled = "myform.user. $ dirty && myform.user. $ invalid || myform.email. $ dirty && myform.email. []); app.controller ( 'validatectrl', function ($ scope) {$ scope.user = 'enther username'; $ scope.email = 'enth password';}); </script> </body> </html>위는 편집자가 귀하에게 소개 한 Legality Check [권장]이 포함 된 Bootstrap 팝업 로그인 상자의 예제 코드입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!