彈出式登入介面
阿新 • • 發佈：2019-01-22
要實現這個功能的大致思路是：
1.首先要在頁面上設定一個登入按鈕，可以是<button><a><img>都行，我們點選這個元素的時候會彈出登入框：
2.其次在頁面合適位置製作兩個<div>，一個登入功能的div,另一個註冊功能的div，注意位置的設定，當網站首次載入進入的時候登入框不可見，那就要把樣式設定為display:"none"
3.當用戶點選登入按鈕的時候，通過JS設定登入div的display=""，如何使用者點選了登入介面上的註冊按鈕時，通過jQuery切換div透明和大小就可以完美實現登入註冊的切換
4.關閉登入框的話也是同樣的道理，把兩個div的display設定為none就行
程式碼如下：
sign.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>sign</title> <style> body { text-align: center; background-color: burlywood; } .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; } </style> <link rel="stylesheet" href="./sign.css"> </head> <body> <div> <button id="displaysign" onclick="start()">點選登入</button> </div> <div class="signform" id="signform" style="display: none"> <div class="signclose"> <img src="image/signclose.ico" width="35px" height="35px" onclick="signclose()"> </div> <div class="userdiv"> <input id="user" class="signinput" type="text" placeholder="使用者名稱" name="user" > </div> <div class="pwddiv"> <input id="pwd" class="signinput" type="password" placeholder="密碼" name="pwd"> </div> <div class="postdiv"> <button>登入</button> </div> <br> <div class="change" style="color: #4d4d4d"> <p>還沒有賬號?趕快<a href="#" style="text-decoration: none;color: #43A047">註冊</a>一個吧</p> </div> </div> <div class="signform" id="registerform" style="display: none"> <div class="signclose"> <img src="image/signclose.ico" width="35px" height="35px" onclick="signclose()"> </div> <div class="userdiv"> <input id="registeruser" class="signinput" onblur="loading()" type="text" placeholder="使用者名稱" name="user"> </div> <img src="image/signloading.gif" style="display: none" id="registerloading"> <div class="pwddiv"> <input id="registerpwd" class="signinput" type="password" placeholder="密碼" name="pwd"> </div> <div class="pwddiv"> <input id="registerrepwd" class="signinput" type="password" placeholder="再次輸入密碼" name="pwd"> </div> <div class="postdiv"> <button>註冊</button> </div> <br> <div class="change" style="color: #4d4d4d"> <p>已有賬號?立刻去<a href="#" style="text-decoration: none;color: #43A047">登入</a>吧</p> </div> </div> </body> <script src="./jquery-3.2.1.min.js"></script> <script src="./signformchange.js"></script> </html>
sign.css
/* * @Author: xshis * @Date: 2018-05-23 11:45:25 * @Last Modified by: xshis * @Last Modified time: 2018-05-23 11:45:28 */ 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
/*
* @Author: xshis
* @Date: 2018-05-23 11:45:50
* @Last Modified by: xshis
* @Last Modified time: 2018-05-23 11:45:52
*/
$(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=""
}需要自己引入juqery庫，就可以跑起來了
本文轉載至：https://www.cnblogs.com/liujianhuaIT/p/6256261.html