弹出式登录界面_如何强制跳出登录弹窗 csdn-CSDN博客

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

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" οnclick="start()">点击登录</button>
</div>
<div class="signform" id="signform" style="display: none">
    <div class="signclose">
        <img src="image/signclose.ico" width="35px" height="35px" οnclick="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" οnclick="signclose()">
        </div>
        <div class="userdiv">
            <input  id="registeruser" class="signinput" οnblur="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