Recientemente hice un proyecto donde los requisitos del proyecto implican el control de acceso. Al acceder a páginas o funciones que requieren que se utilice el inicio de sesión, aparecerá un cuadro de inicio de sesión:
Los efectos son los siguientes:
Figura 1: al hacer clic en el nombre de usuario, si no se inicia sesión, aparecerá el cuadro de inicio de sesión
Una descripción detallada de esta función:
Cuando el inicio de sesión no está involucrado, el cuadro de inicio de sesión está oculto
Al iniciar sesión, el cuadro de inicio de sesión aparece en la esquina superior izquierda de la página
El cuadro de inicio de sesión está oculto después de que el inicio de sesión sea exitoso
Ideas de implementación:
Inserte el DIV registrado antes de la etiqueta del extremo del cuerpo, suponiendo que su método de posicionamiento sea absoluto, y su posición está en la esquina superior izquierda.
La propiedad de visualización predeterminada del cuadro de inicio de sesión es ninguna. Cuando se active el inicio de sesión, cambie la propiedad para bloquear
Adjunto con código de muestra:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> </head> <style> h3 {width: 100%; relleno-bottom: 10px; border-bottom: 2px sillado #ccc;} #close {posición: absoluta; top: 2px; derecha; span {relleno: 3px 10px; fondo de fondo: #999; font-size: 20px; color: blanco; cursor: pointer;} #log {display: none; Ancho: 400px; Altura: 400px; relleno: 30px 40px; Color de fondo: #F3F5F6; Posición: fijo; arriba: 70px ;; Derecha: 30px;} .Error {float: right; color: rojo; font-size: 1.2em; margin-right: 10px} </style> <link rel = "stylesheet" href = "// cdn.bootcss.com/bootstrap/3.3.5/csss/bootstrap.min.css"> <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><Bodton onClick = "document.getElementById ('log'). style.display = 'Block'"> El cuadro de inicio de sesión sale </boton> <div id = "log"> <form de action = "../ control/logincheck.php" método = "post"> <h3> por favor registre </h3> <d div> <etiqueta para = "usame"> useName*</etiqueta> <selicta> "Usuario". type = "text" name = "username" id = "username" placeHolder = "username" onblur = 'chechName ()' requerido/> </div> <div> <lel etiqueta for = "contraseña"> contraseña*</etiqueta> <span id = "psword"> </span> <input type = "contraseña" name = "contraseña" id = "contraseña" posteholder = "contraseña" onblur = 'cheque </div> <div> <label> <span> <input type = "checkbox" value = 'true'> recordarme </span> </label> </div> <input type = "subt" valor = "login"/> <p> <a href = "registrar.html" >>> ¿No tienes una cuenta todavía? Vaya a registrarse </a> </p> </form> <div id = "Close"> <span onClick = "document.getElementById ('log'). Style.display = 'none'"> Close </span> </div> </div> <script> var checkName = function () {document.getElementByid ("user"). Innerhtml = ""; ";"; ";"; "; var name = eval (document.getElementById ('username')). valor; if (name.length> 20 || name.length <1) document.getElementById ("usuario"). InnerHtml = "La longitud del nombre de usuario está entre 1-20!" ; } var checkPassword = function () {document.getElementById ("psword"). innerhtml = ""; var name = eval (document.getElementById ('contraseña')). valor; if (name.length> 12 || name.length <6) document.getElementById ("psword"). innerhtml = "La longitud de la contraseña es entre 6-12!" ; } </script> </body> </html>Un método para implementar la verificación y las indicaciones por completo con AngularJS:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <h2> ng-Controller = "ValidAtectrl" name = "myForm" Novalidate> <p> UserName: <BR> <input type = "text" name = "user" ng-model = "user" requerido> <span style = "color: rojo" ng-show = "myform.user. $ dirty && myform.user. $ invalid"> <span ng ng.show = "myform.user. Se requiere nombre de usuario. </span> </span> </p> <p> Correo electrónico: <br> <input type = "correo electrónico" name = "correo electrónico" ng-model = "correo electrónico" requerido> <span style = "color: rojo" ng-show = "myform.email. $ sucio && myform.email. $ $ inválido"> <span ng-show = "myForm.Email. $ error.rrequired"> correos electrónicos es imprescindible. </span> <span ng-show = "myform.email. $ error.email"> Dirección de correo electrónico ilegal. </span> </span> </p> <p> <input type = "enviar" ng-disable = "myform.user. $ sucio && myform.user. $ invalid || myform.email. $ sucio && myform.email. $ invalid"> </p> </orm> <script> var app = angular.module ('myapp', []); app.controller (wathalc.controller (watidater.controller, function ($ scope) {$ scope.user = 'Ingrese el nombre de usuario';El anterior es el código de ejemplo de Bootstrap Pop-Up Cade de inicio de sesión con Legality Check [recomendado] presentado por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!