Récemment, j'ai réalisé un projet où les exigences du projet impliquent un contrôle d'accès. Lorsque vous accédez à des pages ou des fonctions qui nécessitent une connexion à utiliser, une boîte de connexion apparaîtra:
Les effets sont les suivants:
Figure 1 - Lorsque vous cliquez sur le nom d'utilisateur, s'il n'est pas connecté, la boîte de connexion apparaîtra
Une description détaillée de cette fonction:
Lorsque la connexion n'est pas impliquée, la boîte de connexion est cachée
Lors de la connexion, la boîte de connexion apparaît dans le coin supérieur gauche de la page
La boîte de connexion est cachée après le succès de la connexion
Idées de mise en œuvre:
Insérez le div connecté avant l'étiquette de fin du corps, en supposant que sa méthode de positionnement est absolue, et sa position est dans le coin supérieur gauche.
La propriété d'affichage par défaut de la zone de connexion n'est pas. Lorsque la connexion est déclenchée, modifiez la propriété en blocage
Joint avec un exemple de code:
<!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; background-color: # 999; font-size: 20px; couleur: blanc; curseur: pointeur;} #log {affichage: aucun; Largeur: 400px; hauteur: 400px; rembourrage: 30px 40px; Color d'arrière-plan: # f3f5f6; Position: fixe; en haut: 70px ;; à droite: 30px;} .Error {float: à droite; couleur: rouge; font-taille: 1.2em; margin-right: 10px} </ style> <link rel = "Stylesheet" href = "// cdn.bootcss.cscs"><<script 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> onclick = "document.getElementById ('log'). style.display = 'block'"> La boîte de connexion apparaît </ bouton> <div id = "log"> <form action = "../ contrôle / logincheck.php" Method = "Post"> <h3> Veuillez vous connecter </h3> <div> <étiquette pour = "Entrée"> USERNAME * type = "text" name = "username" id = "username" placeholder = "username" onblur = 'checkname ()' requise /> </div> <v> <label for = "passway"> mot de passe * </ label> <span id = "pword"> </span> <intrut type = "mot de passe" name = "mot de passe" id = "mot de passe" placeholder = "mot de passe" sur sur sur "sur" le mot de passe " </ div> <v> <bablow> <span> <input type = "checkbox" value = 'true'> Souvenez-vous de moi </span> </ label> </div> <input type = "soumed" value = "ligin" /> <p> <a href = "register.html" >>> Vous n'avez pas encore de compte? Allez à l'enregistrement </a> </p> </ form> <div id = "close"> <spann onclick = "document.getElementById ('log'). Style.display = 'nothe'" close </span> </div> </div> <script> var checkname = function () {document.getElementyId ("user"). InnerHtml = "";; var name = eval (document.getElementById ('nom d'utilisateur')). Valeur; if (name.length> 20 || name.length <1) document.getElementByid ("utilisateur"). innerhtml = "La longueur du nom d'utilisateur est entre 1-20!" ; } var checkPassword = function () {document.getElementById ("pword"). innerHtml = ""; var name = eval (document.getElementById ('mot de passe')). valeur; if (name.length> 12 || name.length <6) document.getElementByid ("pword"). innerhtml = "La longueur du mot de passe est entre 6-12!" ; } </ script> </ body> </html>Une méthode pour implémenter la vérification et invite entièrement avec AngularJS:
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </dcript> </-head> <body> <h2> Verification Instance </h2> ng-controlller = "validatectrl" name = "myform" novalidate> <p> nom d'utilisateur: <br> <entrée type = "text" name = "user" ng-model = "user" requis> <span style = "color: red" ng-show = "myform.user. $ sale && myform.user. $ invalid"> <panp ng-show = "myform.user. Le nom d'utilisateur est requis. </span> </span> </p> <p> e-mail: <br> <entrée type = "email" name = "e-mail" ng-model = "e-mail" requis> <span style = "colori: red" ng-show = "myform.email. $ sale && myform.email. $ invalid"> <span ng-show = "myform.email. $ error.required"> e-mail est un must. </span> <span ng-show = "myform.email. $ error.email"> adresse e-mail illégale. </span> </span> </p> <p> <input type = "soumider" ng-disabled = "myform.user. $ sale && myform.user. $ invalid || myform.email. $ sale && myform.email. $ invalid"> </p> </ form> <script> var app = angular.Module ('myApp', []); app. function ($ scope) {$ scope.user = 'Entrer le nom d'utilisateur';Ce qui précède est l'exemple de code de la boîte de connexion pop-up bootstrap avec la légalité CHOCK [recommandé] vous a présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!