web全栈开发之网站开发二（弹出式登陆注册框前端实现-类腾讯）

时间 2020-06-24 标签 web 开发网站弹出式登陆注册前端实现腾讯

此次给你们分享的是目前不少网站中流行的弹出式登陆框，以下面的腾讯网登陆界面，采用弹出式登陆的好处是大大提高了网站的用户体验和交互性，用户不用从新跳转到指定的页面就能登陆，很是方便css

先来个演示地址html

要实现这个功能的大体思路是：jquery

1.首先要在页面上设置一个登陆按钮，能够是<button><a><img>都行，咱们点击这个元素的时候会弹出登陆框
web

2.其次在页面合适位置制做两个<div>，一个登陆功能的div,另外一个注册功能的div，注意位置的设置，当网站首次加载进入的时候登陆框不可见，那就要把样式设置为display:"none"app

3.当用户点击登陆按钮的时候，经过JS设置登陆div的display=""，如何用户点击了登陆界面上的注册按钮时，经过jQuery切换div透明和大小就能够完美实现登陆注册的切换post

4.关闭登陆框的话也是一样的道理，把两个div的display设置为none就行网站

上代码:url

sign.htmlspa

  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>

sign.csscode

body {
    text-align: center;
    background-color: burlywood;
}
#displaysign{
    position: relative;
    top: 80px;
    width: 70px;
    height: 40px;
}
.signform {
    font-family: 微软雅黑;
    position: fixed;
    background-color: white;
    top: 20%;
    left: 30%;
    width: 500px;
    height: 400px;
    border-radius: 1em;
    text-align: center;
    z-index: 999;
}
#registerform {
    height: 450px;
}
.signclose {
    cursor: pointer;
    float: right;
    overflow: hidden;
    text-align: center;
    position: relative;
    height: 35px;
    width: 35px;
    margin-top: 10px;
    margin-right: 10px;
}
#registerloading{
    position: absolute;
    width: 25px;
    height: 25px;
    left: 410px;
    top: 90px;
}
.signinput {
    text-align: center;
    border-radius: 0.2em;
    width: 280px;
    height: 45px;
    border: none;
    background-color:#f2f2f2;
    font-size: 28px;
}
.signinput::-webkit-input-placeholder {
    font-size: 26px;
}
.userdiv {
    position: relative;
    margin-top: 80px;
}
.pwddiv {
    position: relative;
    margin-top: 20px;
}
.postdiv {
    position: relative;
    margin-top: 20px;
}
.postdiv button {
    cursor: pointer;
    color: white;
    font-size: 26px;
    border: none;
    border-radius: 0.4em;
    width: 280px;
    height: 45px;
    background-color:#4CAF50;
}

signformchange.js

$(function ()
{
        $('.change a').click(function ()
        {
            $('.signform').animate({height: 'toggle', opacity: 'toggle'}, 'slow');
        });
})

function start() {
document.getElementById('signform').style.display=""
}

function signclose() {
    document.getElementById('signform').style.display="none"
    document.getElementById('registerform').style.display="none"
}
function loading() {
    document.getElementById('registerloading').style.display=""
}