Recently I made a project where project requirements involve access control. When accessing pages or functions that require login to be used, a login box will pop up:
The effects are as follows:
Figure 1 - When clicking on the username, if not logged in, the login box will pop up
A detailed description of this function:
When login is not involved, the login box is hidden
When logging in, the login box pops up to the upper left corner of the page
The login box is hidden after login is successful
Implementation ideas:
Insert the logged-in div before the body end tag, assuming its positioning method is absolute, and its position is in the upper left corner.
The default display property of the login box is none. When login is triggered, change the property to block
Attached with sample 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;color:white;cursor:pointer;} #log{display: none; width: 400px; height: 400px; padding: 30px 40px; background-color: #F3F5F6; position: fixed; top: 70px;; right: 30px;} .error{float:right;color:red;font-size:1.2em;margin-right:10px}</style><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/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><body><button onclick="document.getElementById('log').style.display='block'">Login box pops up</button><div id="log"> <form action="../control/logincheck.php" method="post"> <h3>Please log in</h3> <div> <label for="username">Username*</label> <span id="user"> </span> <input type="text" name="username" id="username" placeholder="username" onblur='checkName()' required /> </div> <div> <label for="password">Password*</label> <span id="psword"> </span> <input type="password" name="password" id="password" placeholder="password" onblur='checkPassword()' required /> </div> <div> <label> <span><input type="checkbox" value='true' > Remember me</span> </label> </div> <input type="submit" value="Login" /> <p ><a href="register.html">>> Don't have an account yet? Go to register</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')).value; if (name.length > 20 || name.length < 1) document.getElementById("user").innerHTML = "The username length is between 1-20!" ; } var checkPassword = function(){ document.getElementById("psword").innerHTML =""; var name = eval(document.getElementById('password')).value; if (name.length > 12 || name.length < 6) document.getElementById("psword").innerHTML="Password length is between 6-12!" ; }</script></body></html>A method to implement verification and prompts entirely with 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="validateCtrl" name="myForm" novalidate><p>Username:<br><input type="text" name="user" ng-model="user" required><span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"><span ng-show="myForm.user.$error.required">The username is required. </span></span></p><p>Email:<br><input type="email" name="email" ng-model="email" required><span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid"><span ng-show="myForm.email.$error.required">Email is a must. </span><span ng-show="myForm.email.$error.email">Illegal email address. </span></span></p><p><input type="submit"ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid"></p></form><script>var app = angular.module('myApp', []);app.controller('validateCtrl', function($scope) { $scope.user = 'enter username'; $scope.email = 'enter password';});</script></body></html>The above is the example code of Bootstrap pop-up login box with legality check [Recommended] introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!