Baru -baru ini saya membuat proyek di mana persyaratan proyek melibatkan kontrol akses. Saat mengakses halaman atau fungsi yang memerlukan login untuk digunakan, kotak login akan muncul:
Efeknya adalah sebagai berikut:
Gambar 1 - Saat mengklik nama pengguna, jika tidak masuk, kotak login akan muncul
Deskripsi terperinci dari fungsi ini:
Ketika login tidak terlibat, kotak login disembunyikan
Saat masuk, kotak login muncul ke sudut kiri atas halaman
Kotak login tersembunyi setelah login berhasil
Ide Implementasi:
Masukkan div yang masuk sebelum tag ujung tubuh, dengan asumsi metode penentuan posisi itu absolut, dan posisinya berada di sudut kiri atas.
Properti tampilan default dari kotak login tidak ada. Saat login dipicu, ubah properti untuk memblokir
Dilampirkan dengan kode sampel:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> h3{width:100%;padding-bottom:10px;border-bottom:2px solid #CCC;} #close{position:absolute;top:2px;right:2px;} #close span {padding: 3px 10px; latar belakang-warna: #999; font-size: 20px; warna: putih; kursor: pointer;} #log {display: none; Lebar: 400px; Tinggi: 400px; padding: 30px 40px; latar belakang-warna: #f3f5f6; Posisi: diperbaiki; Atas: 70px ;; Kanan: 30px;} .Error {float: right; color: red; font-size: 1.2em; margin-right: 10px} </style> <link rel = "stylesheet" href = "// cdn.bootcss.com/bootstrap/3.5/css/cbootstrap.min.css.com/bootstrap/3.5/csss/coottrap src = "// cdn.bootcss.com/jQuery/1.11.3/jquery.min.js"></script><script src =" // cdn.bootcss.com/boottrap/3.3.5/js/bootstrap.min.js"></script> <but> OnClick = "document.geteLementById ('log'). style.display = 'block'"> kotak login muncul </button> <div id = "log"> <Form Action = "../ Control/LoginCheck.php" Metode = "POST"> <H3> Harap masuk </h3> <v> <label for = "ucername"> type = "text" name = "username" id = "nama pengguna" placeholder = "nama pengguna" onsblur = 'checkname ()' diperlukan/> </div> <v> <label untuk = "kata sandi"> kata sandi*</label> <span id = "psword"> </span> <input type = "kata sandi" kata sandi = "kata sandi" kata sandi = "kata sandi =" kata sandi = "kata sandi =" kata sandi = "kata sandi =" kata sandi "id =" kata sandi "iD =" kata sandi = "kata sandi" "idt" </div> <div> <label> <span> <input type = "checkbox" value = 'true'> ingat saya </span> </label> </div> <input type = "kirim" value = "login"/> <p> <a href = "register.html" >>> belum memiliki akun? Buka Daftarkan </a> </p> </form> <div id = "tutup"> <span onclick = "document.geteLementById ('log'). Style.display = 'none'"> tutup </span> </div> </div> <script> var checkname = ") {document.getElementLementByid (" User "). InnerHam =") {document.getElementLementById ("User"). InnerHet = "function () {document.geteLementLementByid (" User "). var name = eval (document.geteLementById ('username')). nilai; if (name.length> 20 || name.length <1) document.geteLementById ("user"). innerHtml = "Panjang nama pengguna adalah antara 1-20!" ; } var checkPassword = function () {document.getElementById ("pSword"). innerHtml = ""; var name = eval (document.geteLementById ('password')). nilai; if (name.length> 12 || name.length <6) document.geteLementById ("pSword"). innerHtml = "Panjang kata sandi antara 6-12!" ; } </script> </body> </html>Metode untuk mengimplementasikan verifikasi dan mendorong sepenuhnya dengan AngularJS:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </skrip </head> </head> <body> <momfy> "head>" head> </head> </head> <body> <momy> "head>" head> "head> </head> </head> <body> <h2 H2 ng-controller = "validatectrl" name = "myform" novalidate> <p> nama pengguna: <br> <input type = "text" name = "user" ng-model = "pengguna" diperlukan> <span style = "color: red" ng-show = "myform.user. $ kotor && myForm.user. $. ($"> "MyForm.user. $ Dirty && myForm.user. $. $. $. Nama pengguna diperlukan. </span> </span> </p> <p> Email: <br> <input type = "email" name = "email" ng-model = "email" diperlukan> <span style = "color: red" ng-show = "myform.email. $ Dirty && myform.email. $ tidak valid"> <span ng-show = myForm.eMail. $ MyForm. $ </span> <span ng-show = "myForm.email. $ error.email"> Alamat email ilegal. </span> </span> </p> <p> <input type = "kirim" ng-disabled = "myForm.user. $ Dirty && myForm.user. $ Invalid || myForm.email. $ Dirty && myForm.email. $ Invalid"> </p> </formule> <script> var app = myongule.moD. []); app.controller ('validatectrl', function ($ scope) {$ scope.user = 'masukkan nama pengguna'; $ scope.email = 'masukkan kata sandi';}); </script> </body> </html>Di atas adalah contoh kode kotak login pop-up bootstrap dengan centang legalitas [disarankan] diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!