Recentemente, fiz um projeto em que os requisitos do projeto envolvam controle de acesso. Ao acessar páginas ou funções que exigem que o login seja usado, uma caixa de login será exibida:
Os efeitos são os seguintes:
Figura 1 - Ao clicar no nome de usuário, se não estiver conectado, a caixa de login será exibida
Uma descrição detalhada desta função:
Quando o login não está envolvido, a caixa de login está oculta
Ao fazer login, a caixa de login aparece no canto superior esquerdo da página
A caixa de login está oculta após o bem -sucedido ser bem -sucedido
Ideias de implementação:
Insira a div registrada antes da etiqueta final do corpo, assumindo que seu método de posicionamento seja absoluto e sua posição está no canto superior esquerdo.
A propriedade de exibição padrão da caixa de login é nenhuma. Quando o login for acionado, altere a propriedade para bloquear
Anexado com código de amostra:
<! Docttype html> <html lang = "pt"> <head> <meta charset = "utf-8"> <title> title </title> </ad Head> <estilo> h3 {width #ccc; 2; span {preenchimento: 3px 10px; cor de fundo: #999; font-size: 20px; cor: branco; cursor: ponteiro;} #log {display: nenhum; Largura: 400px; Altura: 400px; preenchimento: 30px 40px; Background-Color: #f3f5f6; Posição: fixado; topo: 70px ;; à direita: 30px;} .Error {float: direita; cor: vermelho; font-size: 1.2em; margem-right: 10px} </style> <link rel = "stylesheet" href = "// cdn.bootcss.com/bootstrap/3.5/cript/cret/bootsstrap.minmin.cs.csnhas src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></Script><script src =" // cdn.bootcss.com/bootstrap/3.5/js/bootstrap.min.js">/script> OnClick = "Document.getElementById ('log'). style.display = 'bloqueio'"> caixa de login aparece </button> <div id = "log"> <formulário action = "/ control/logincheck.php "Method =" post "> <h3> efetue login </h3> <div> <bel" " <input type = "text" name = "nome de usuário" id = "nome de usuário" placeholder = "userName" onblur = 'checkName ()' requerir/> </div> <div> <gravador para = "senha"> senha*</bel> <span id = "psword"> </span> <input typ (typing "> senha" (name = "" /> </div> <div> <brety> <pan> <input type = "caixa de seleção" value = 'true'> lembre -me de </span> </elabel> </div> <input type = "submit" value = "login"/> <p> <a href = "registr.html" >>> não tem uma conta ainda? Vá para registrar </a> </p> </morm> <div id = "close"> <span onclick = "document.getElementById ('log'). Style.display = 'nenhum'"> feche </span> </div> </div> <cript> var checkName () {document.getElementById ("; var name = avaliar (document.getElementById ('nome de usuário')). if (name.length> 20 || name.length <1) document.getElementById ("Usuário"). Innerhtml = "O comprimento do nome de usuário está entre 1-20!" ; } var checkpassword = function () {document.getElementById ("pword"). innerhtml = ""; var name = avaliar (document.getElementById ('senha')). if (name.length> 12 || name.length <6) document.getElementById ("Psword"). INNERHTML = "O comprimento da senha está entre 6-12!" ; } </script> </body> </html>Um método para implementar a verificação e solicita inteiramente com o 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>Verification instance</h2><form ng-app="myApp" ng-controller = "validateCtry" name = "myform" novalidado> <p> nome de usuário: <br> <input type = "text" name = "user" ng-model = "user" requerido> <span style = "cor: vermelho" ng-show = "myform.user. $ Dirty && myform.user. ng-show = "myform.user. $ error.Required"> O nome de usuário é necessário. </span> </span> </p> <p> email: <br> <input type = "email" name = "email" ng-model = "email" necessário> <span style = "cor: vermelho" ng-show = "myform.mail. </span> <span ng-show = "myform.email. $ error.mail"> endereço de e-mail ilegal. </span> </span> </p> <p> <input type = "submite" ng-disabled = "myform.user. []); App.Controller ('ValidatectRl', função ($ scope) {$ scope.user = 'digite nome de usuário'; $ scope.email = 'digite senha';}); </script> </body> </html>O exposto acima é o código de exemplo da caixa de login pop-up de bootstrap com verificação de legalidade [recomendada] introduzida pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!