这次给大家分享的是目前很多网站中流行的弹出式登录框，如下面的腾讯网登录界面，采用弹出式登录的好处是大大提升了网站的用户体验和交互性，用户不用重新跳转到指定的页面就能登录，非常方便
先来个演示地址
要实现这个功能的大致思路是：
1.首先要在页面上设置一个登录按钮，可以是<button><a><img>都行，我们点击这个元素的时候会弹出登录框
2.其次在页面合适位置制作两个<div>，一个登录功能的div,另一个注册功能的div，注意位置的设置，当网站首次加载进入的时候登录框不可见，那就要把样式设置为display:"none"
3.当用户点击登录按钮的时候，通过JS设置登录div的display=""，如何用户点击了登录界面上的注册按钮时，通过jQuery切换div透明和大小就可以完美实现登录注册的切换
4.关闭登录框的话也是同样的道理，把两个div的display设置为none就行
上代码:
sign.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>sign</title> 6 <style> 7 body { 8 text-align: center; 9 background-color: burlywood; 10 } 11 .signform { 12 font-family: 微软雅黑; 13 position: fixed; 14 background-color: white; 15 top: 20%; 16 left: 30%; 17 width: 500px; 18 height: 400px; 19 border-radius: 1em; 20 text-align: center; 21 z-index: 999; 22 } 23 #registerform { 24 height: 450px; 25 } 26 .signclose { 27 cursor: pointer; 28 float: right; 29 overflow: hidden; 30 text-align: center; 31 position: relative; 32 height: 35px; 33 width: 35px; 34 margin-top: 10px; 35 margin-right: 10px; 36 } 37 #registerloading{ 38 position: absolute; 39 width: 25px; 40 height: 25px; 41 left: 410px; 42 top: 90px; 43 } 44 .signinput { 45 text-align: center; 46 border-radius: 0.2em; 47 width: 280px; 48 height: 45px; 49 border: none; 50 background-color:#f2f2f2; 51 font-size: 28px; 52 } 53 .signinput::-webkit-input-placeholder { 54 font-size: 26px; 55 } 56 .userdiv { 57 position: relative; 58 margin-top: 80px; 59 } 60 .pwddiv { 61 position: relative; 62 margin-top: 20px; 63 } 64 .postdiv { 65 position: relative; 66 margin-top: 20px; 67 } 68 .postdiv button { 69 cursor: pointer; 70 color: white; 71 font-size: 26px; 72 border: none; 73 border-radius: 0.4em; 74 width: 280px; 75 height: 45px; 76 background-color:#4CAF50; 77 } 78 </style> 79 <link rel="stylesheet" href="css/sign.css"> 80 </head> 81 <body> 82 <div> 83 <button id="displaysign" onclick="start()">点击登录</button> 84 </div> 85 <div class="signform" id="signform" style="display: none"> 86 <div class="signclose"> 87 <img src="image/signclose.ico" width="35px" height="35px" onclick="signclose()"> 88 </div> 89 <div class="userdiv"> 90 <input id="user" class="signinput" type="text" placeholder="用户名" name="user" > 91 </div> 92 <div class="pwddiv"> 93 <input id="pwd" class="signinput" type="password" placeholder="密码" name="pwd"> 94 </div> 95 <div class="postdiv"> 96 <button>登录</button> 97 </div> 98 <br> 99 <div class="change" style="color: #4d4d4d"> 100 <p>还没有账号?赶快<a href="#" style="text-decoration: none;color: #43A047">注册</a>一个吧</p> 101 </div> 102 </div> 103 <div class="signform" id="registerform" style="display: none"> 104 <div class="signclose"> 105 <img src="image/signclose.ico" width="35px" height="35px" onclick="signclose()"> 106 </div> 107 <div class="userdiv"> 108 <input id="registeruser" class="signinput" onblur="loading()" type="text" placeholder="用户名" name="user"> 109 </div> 110 <img src="image/signloading.gif" style="display: none" id="registerloading"> 111 <div class="pwddiv"> 112 <input id="registerpwd" class="signinput" type="password" placeholder="密码" name="pwd"> 113 </div> 114 <div class="pwddiv"> 115 <input id="registerrepwd" class="signinput" type="password" placeholder="再次输入密码" name="pwd"> 116 </div> 117 <div class="postdiv"> 118 <button>注册</button> 119 </div> 120 <br> 121 <div class="change" style="color: #4d4d4d"> 122 <p>已有账号?立刻去<a href="#" style="text-decoration: none;color: #43A047">登录</a>吧</p> 123 </div> 124 </div> 125 </body> 126 <script src="js/jquery-3.1.1.min.js"></script> 127 <script src="js/signformchange.js"></script> 128 </html>