Kürzlich habe ich ein Projekt erstellt, bei dem Projektanforderungen Zugangskontrolle beinhalten. Wenn Sie auf Seiten oder Funktionen zugreifen, bei denen eine Anmeldung verwendet werden muss, wird ein Anmeldefeld angezeigt:
Die Effekte sind wie folgt:
Abbildung 1 - Wenn Sie auf den Benutzernamen klicken, falls sie nicht angemeldet sind, wird das Anmeldefeld angezeigt
Eine detaillierte Beschreibung dieser Funktion:
Wenn Anmeldung nicht beteiligt ist, ist das Anmeldefeld versteckt
Beim Anmeldung taucht das Anmeldefeld in die obere linke Ecke der Seite auf
Das Anmeldefeld ist versteckt, nachdem das Anmeldung erfolgreich ist
Implementierungsideen:
Fügen Sie das angemeldete DIV vor dem Body End-Tag ein, vorausgesetzt, seine Positionierungsmethode ist absolut und seine Position befindet sich in der oberen linken Ecke.
Die Standardeigenschaft des Anmeldefelds ist keine. Ändern Sie die Eigenschaft, wenn die Anmeldung ausgelöst wird, um die Eigenschaft zu blockieren
Mit Beispielcode beigefügt:
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> </head> <style> h3 {width: 100%; padding-bottom: 10px; Border-Bottom: 2px solide #cc;} #CLOSE {{position: {{position: {oder span {padding: 3px 10px; Hintergrundfarbe: #999; Schriftgröße: 20px; Farbe: Weiß; Cursor: Zeiger;} #log {display: Keine; Breite: 400px; Höhe: 400px; Polsterung: 30px 40px; Hintergrundfarbe: #f3f5f6; Position: fest; Top: 70px ;; Rechts: 30px;} .Eror {float: rechts; Farbe: rot; Schriftgröße: 1.2EM; Margin-Right: 10px} </style> <link rel = "stylesheet" href = "// cdn.bootcs.com/bootstrap/3.5/css/bootstrap.min src = "// cdn.bootcs.com/jquery/1.11.3/jquery.min.js"></script><Script src =" // cdn.bootcs.com/bootstrap/3.5/js/bootstrap.min.js">< onclick = "document.getElementById ('log'). style.display = 'block'"> login -Box wird </button> <div id = "log"> <form action = "../ control/logincheck.php" methode = "post"> <H3> Bitte log in </h3> <divcheck.php Input = "username"> username "> username"> username "> username"> username "> username"> username "> username"> username "> username"> username "> username" username "> username" username "> username" type = "text" name = "username" id = "userername" placeholder = "userername" onblur = 'checkName ()' Erforderlich/> </div> <div> <label für = "Passwort"> Passwort*</label> <span id = "psword" </div> <div> <label> <span> <Eingabe type = "CheckBox" value = 'true'> Erinnere dich an mich </span> </label> </div> <Eingabe type = "value =" login "/> <p> <a href =" register.html ">>> haben noch kein Konto? Gehen Sie zu Register </a> </p> </form> <div id = "close"> <span onclick = "document.getElementById ('log'). Style.display = 'non'"> close </span> </div> </div> <script> var checkname = function () {document.getelementby ("user"). Innerhtm = "; var name = eval (document.getElementById ('Benutzername')). Wert; if (name.length> 20 || name.length <1) document.getElementById ("Benutzer"). InnerHtml = "Die Benutzername-Länge liegt zwischen 1-20!" ; } var checkPassword = function () {document.getElementById ("pSword"). Innerhtml = ""; var name = eval (document.getElementById ('Passwort')). Wert; if (name.length> 12 || name.length <6) document.getElementById ("pSword"). InnerHtml = "Kennwortlänge ist zwischen 6-12!" ; } </script> </body> </html>Eine Methode zur Implementierung von Überprüfung und Aufforderungen vollständig mit AngularJS:
<! DocType html> <html> <kopf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min ng-controller = "validatectrl" name = "myForm" novalidate> <p> Benutzername: <br> <Eingabe type = "text" name = "user" ng-model = "Benutzer" erforderlich> <span style = "color: rot" ng-show = "myform.user. ist erforderlich. </span> </span> </p> <p> E-Mail: <br> <Eingabe type = "E-Mail" name = "E-Mail" ng-model = "E-Mail" Erforderlich> <span style = "color: rot" ng-show = "myForm.email. $ schmutzig && myForm.Email. </span> <span ng-show = "myForm.email. $ error.email"> Illegale E-Mail-Adresse. </span> </span> </p> <p> <Eingabe type = "subieren" ng-disabled = "myForm.user. Funktion ($ scope) {$ scope.user = 'Benutzername eingeben';Das obige ist der Beispielcode von Bootstrap Pop-up-Anmeldefeld mit Legalitätsprüfung [empfohlen], die Ihnen vom Editor vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!