เมื่อเร็ว ๆ นี้ฉันทำโครงการที่ข้อกำหนดของโครงการเกี่ยวข้องกับการควบคุมการเข้าถึง เมื่อเข้าถึงหน้าหรือฟังก์ชั่นที่ต้องใช้การเข้าสู่ระบบกล่องเข้าสู่ระบบจะปรากฏขึ้น:
ผลกระทบมีดังนี้:
รูปที่ 1 - เมื่อคลิกที่ชื่อผู้ใช้หากไม่เข้าสู่ระบบกล่องเข้าสู่ระบบจะปรากฏขึ้น
คำอธิบายโดยละเอียดของฟังก์ชั่นนี้:
เมื่อไม่เกี่ยวข้องเข้าสู่ระบบกล่องเข้าสู่ระบบจะถูกซ่อนไว้
เมื่อเข้าสู่ระบบกล่องเข้าสู่ระบบจะปรากฏขึ้นที่มุมซ้ายบนของหน้า
กล่องเข้าสู่ระบบถูกซ่อนหลังจากการเข้าสู่ระบบสำเร็จ
แนวคิดการใช้งาน:
แทรก div ที่เข้าสู่ระบบก่อนที่แท็กปลายลำตัวโดยสมมติว่าวิธีการวางตำแหน่งนั้นแน่นอนและตำแหน่งของมันอยู่ที่มุมซ้ายบน
คุณสมบัติการแสดงผลเริ่มต้นของกล่องเข้าสู่ระบบคือไม่มี เมื่อทริกเกอร์เข้าสู่ระบบให้เปลี่ยนคุณสมบัติเป็นบล็อก
แนบกับรหัสตัวอย่าง:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> </head> <style> H3 {width: 100%; padding-bottom: 10px; Span {padding: 3px 10px; พื้นหลังสี: #999; Font-size: 20px; color: White; Cursor: Pointer;} #log {Display: None; ความกว้าง: 400px; ความสูง: 400px; Padding: 30px 40px; พื้นหลังสี: #F3F5F6; ตำแหน่ง: แก้ไข; ด้านบน: 70px ;; ขวา: 30px;} .error {float: ขวา; สี: สีแดง; font-size: 1.2em; margin-right: 10px} </style> <link rel = "stylesheet" href = "// cdn.bootcss.com/bootstrap/3 src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> onclick = "document.getElementById ('log'). style.display = 'block'"> กล่องเข้าสู่ระบบปรากฏขึ้น </button> <div id = "log"> <form action = "../ control/loginCheck.php" method = "post"> <h3> โปรดเข้าสู่ระบบ type = "text" name = "username" id = "username" placeholder = "ชื่อผู้ใช้" onblur = 'checkName ()' ต้องการ/> </div> <div> <label for = "รหัสผ่าน"> รหัสผ่าน*</label> <span id = "psword"> </div> <div> <dable> <pan> <อินพุต type = "ช่องทำเครื่องหมาย" value = 'true'> จดจำฉัน </span> </label> </div> <อินพุต type = "ส่ง" value = "เข้าสู่ระบบ"/> <p> <a href = "register.html" >>> ไม่มีบัญชีหรือยัง ไปที่การลงทะเบียน </a> </p> </form> <div id = "close"> <span onclick = "document.getElementById ('log'). style.display = 'none'" ปิด </span> </div> </div> ชื่อ var = eval (document.getElementById ('ชื่อผู้ใช้')). ค่า; if (name.length> 20 || name.length <1) document.getElementById ("ผู้ใช้"). innerhtml = "ความยาวชื่อผู้ใช้อยู่ระหว่าง 1-20!" - } var checkPassword = function () {document.getElementById ("psword"). innerhtml = ""; ชื่อ var = eval (document.getElementById ('รหัสผ่าน')). ค่า; 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.bdimg.com/libs/angular.js/1.4.6/angular.min.js" ng-controller = "validatectl" name = "myform" novalidate> <p> ชื่อผู้ใช้: <br> <อินพุต type = "text" name = "user" ng-model = "ผู้ใช้" ต้องการ> <span style = "สีแดง" ng-show = "myform.user. ต้องใช้ชื่อผู้ใช้ </span> </span> </p> <p> อีเมล: <br> <อินพุต type = "อีเมล" name = "อีเมล" ng-model = "อีเมล" ต้องการ> <span style = "สี: สีแดง" ng-show = "myform.email. $ dirty && myform.email. </span> <span ng-show = "myform.email. $ error.email"> ที่อยู่อีเมลที่ผิดกฎหมาย </span> </span> </p> <p> <อินพุต type = "ส่ง" ng-disabled = "myform.user. $ dirty && myform.user. $ ไม่ถูกต้อง || myform.email. $ dirty && myform.email. $ invalid"> </p> ฟังก์ชั่น ($ scope) {$ scope.user = 'ป้อนชื่อผู้ใช้';ด้านบนเป็นรหัสตัวอย่างของกล่องเข้าสู่ระบบป๊อปอัพ bootstrap พร้อมการตรวจสอบความถูกต้องตามกฎหมาย [แนะนำ] แนะนำให้คุณรู้จักโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!