web全棧開發之網站開發二（彈出式登陸註冊框前端實現-類騰訊）

時間 2020-06-24

標籤 web 開發網站彈出式登陸註冊前端實現騰訊欄目 HTML 简体版

原文原文鏈接

此次給你們分享的是目前不少網站中流行的彈出式登陸框，以下面的騰訊網登陸界面，採用彈出式登陸的好處是大大提高了網站的用戶體驗和交互性，用戶不用從新跳轉到指定的頁面就能登陸，很是方便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=""
}