Недавно я сделал проект, в котором требования к проекту включают контроль доступа. При доступе к страницам или функциям, которые требуют использования входа в систему, появится ящик для входа в систему:
Эффекты следующие:
Рисунок 1 - При нажатии на имя пользователя, если не войти в систему, я всплывает в системе входа в систему
Подробное описание этой функции:
Когда логин не задействован, ящик для входа скрыт
При входе в систему ящик для входа появляется в верхнем левом углу страницы
Вход в систему скрыт после успешного входа в систему
Идеи реализации:
Вставьте зарегистрированный Div перед тегом тела, предполагая, что его метод позиционирования абсолютный, и его положение находится в верхнем левом углу.
Свойство отображения по умолчанию в поле для входа не является. Когда запускается вход, измените свойство на блокировку
Прикреплено с примером кода:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> title </title> </head> <style> h3 {width: 100%; Padding-bottom: 10px; border-bottom: 2px #ccc;} #close {absolute: 2px; span {padding: 3px 10px; фоновый цвет: #999; размер шрифта: 20px; color: white; cursor: pointer;} #log {display: none; Ширина: 400px; Высота: 400px; Заполнение: 30px 40px; фоновый цвет: #f3f5f6; позиция: исправлена; Верх: 70px ;; Справа: 30px;} .error {float: right; цвет: красный; 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"> написано onclick = "document.getElementById ('log'). style.display = 'block'"> opplos ops </button> <div = "log"> <form action = "../ control/logincheck.php" method = "post"> <h3> Пожалуйста, войдите в систему </h3> <div> <babel for = "username"> usernam <input type = "text" name = "username" id = "username" Placeholder = "username" onblur = 'checkname ()' require/> </div> <div> <label for = "пароль"> пароль*</label> <span id = "psword"> </span> password = "password =" password = "palsordlore =" ontlyblore = "ontraslor =" ontraslor = "ontraslor =" ontryblor = "ontabler =" /> </div> <div> <backel> <pan> <input type = "fackbox" value = 'true'> запомнить меня </span> </label> </div> <input type = "Отправить" value = "login"/> <p> <a href = "register.html" >>> еще нет учетной записи? Перейдите к регистрации </a> </p> </form> <div id = "close"> <span onclick = "document.getElementById ('log'). Style.display = 'none'"> close </span> </div> </div> <script> var checkname = function () {decoctelementbyid ("пользователь"). var name = eval (document.getElementbyId ('username')). value; if (name.length> 20 || name.length <1) document.getElementById («Пользователь»). innerHTML = "Длина имени пользователя составляет от 1 до 20!" ; } var checkpassword = function () {document.getElementById ("psword"). innerHtml = ""; var name = eval (document.getElementById ('пароль')). Value; if (name.length> 12 || name.length <6) document.getElementById ("psword"). innerHtml = "Длина пароля находится между 6-12!" ; } </script> </body> </html>Метод для реализации проверки и подсказки полностью с 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> <hody> <h2. ng-controller = "valyatectrecter" name = "myform" novalidate> <p> имя пользователя: <br> <input type = "text" name = "user" ng-model = "user" требуется> <span style = "color: red" ng-show = "myform.user. $ dirty && myform.user. $ venalid"> <prop ng-show = "$" $ "$". Имя пользователя требуется. </span> </span> </p> <p> Электронная почта: <br> <input type = "email" name = "email" ng-model = "email" reply> <span style = "color: red" ng-shef = "myform.email. $ dirty && myform.email. $ Invalid"> <span ng-show = "myform.email. </span> <span ng-show = "myform.email. $ error.email"> Незаконный адрес электронной почты. </span> </span> </p> <p> <input type = "supper" ng-disabled = "myform.user. $ dirty && myform.user. $ Invalid || myform.email. $ dirty && myform.email. $ Invalid"> </p> </form> <script> var app = angular.mular. Функция ($ scope) {$ scope.user = 'enter username';Выше приведено пример кода Bootstrap Pop Up Login с проверкой законности [рекомендуется], представленный вам редактором. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!