ASP.NETWeb弹出式登录

闲来无事，想起之前项目答辩的时候，登录页无法定夺唉😔

于是便撸了个通用型的登录页
原理非常简单，个人觉得也很实用

点击登录按钮
弹出登录框，与此同时原来的显示层被遮盖，在上层的login框中输入并登录
因为是演示案例不做登陆处理

前端布局

<form id="form1" runat="server">
        <button type="button">登录</button>
        <div class="popOutBg"></div>
        <div class="popOut">
            <span title="exit">x </span>
            <table>
                <caption>欢迎登录XXX</caption>
                <tr>
                    <td class="title">用户名：</td>
                    <td>
                        <asp:TextBox ID="txt_name" runat="server" CssClass="text" placeholder="请输入用户名"></asp:TextBox>
                    </td>
                </tr>
                <tr>
                    <td class="title">密   码：</td>
                    <td>
                        <asp:TextBox ID="txt_pwd" runat="server" TextMode="Password" CssClass="text" placeholder="请输入密码"></asp:TextBox>

                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <asp:Button ID="btn_Login" runat="server" CssClass="login" Text="登录" />
                    </td>
                </tr>
            </table>
        </div>
    </form>

样式排布

设置默认只显示最底层div

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        button,
        input {
            outline: none;
        }

        button,
        .login {
            width: 120px;
            height: 42px;
            background: #55f;
            color: #fff;
            border: none;
            border-radius: 6px;
            display: block;
            margin: 20px auto;
            cursor: pointer;
        }

        .popOutBg {
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            background: #666;
            display: none;
        }

        .popOut {
            position: fixed;
            width: 600px;
            height: 300px;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -300px;
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            display: none;
        }

            .popOut > span {
                position: absolute;
                right: 10px;
                top: 0;
                height: 42px;
                line-height: 42px;
                color: #000;
                font-size: 30px;
                cursor: pointer;
            }

            .popOut table {
                display: block;
                margin: 42px auto 0;
                width: 520px;
            }

            .popOut caption {
                width: 520px;
                text-align: center;
                color: #55f;
                font-size: 18px;
                line-height: 42px;
            }

            .popOut table tr td {
                color: #666;
                padding: 6px;
                font-size: 14px;
            }

                .popOut table tr td:first-child {
                    text-align: right;
                }

        .text {
            width: 280px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #999;
            padding: 5px 10px;
            color: #000;
            font-size: 14px;
            border-radius: 6px;
        }

            .text:focus {
                border-color: #55f;
            }

        .title {
            width: 120px;
        }

        @keyframes ani {
            from {
                transform: translateX(-100%) rotate(-60deg) scale(.5);
            }

            50% {
                transform: translateX(0) rotate(0) scale(1);
            }

            90% {
                transform: translateX(20px) rotate(0) scale(.8);
            }

            to {
                transform: translateX(0) rotate(0) scale(1);
            }
        }

        .ani {
            animation: ani .5s ease-in-out;
        }
    </style>

js实现动画效果

使用js该需要更改的样式

<script type="text/javascript">
    function $(param) {
        if (arguments[1] == true) {
            return document.querySelectorAll(param);
        } else {
            return document.querySelector(param);
        }
    }

    function ani() {
        $(".popOut").className = "popOut ani";
    }
    $("button").onclick = function () {
        $(".popOut").style.display = "block";
        ani();
        $(".popOutBg").style.display = "block";
    };
    $(".popOut > span").onclick = function () {
        $(".popOut").style.display = "none";
        $(".popOutBg").style.display = "none";
    };
    $(".popOutBg").onclick = function () {
        $(".popOut").style.display = "none";
        $(".popOutBg").style.display = "none";
    };
</script>

登录页的原理大同小异就先这样吧！！！