PC端弹出层效果

一点资讯的登录.jpeg

点击登录按钮前.jpeg

�登录框弹出.jpeg

css代码

.login-btn {
            position: fixed;
            left: 40%;
            top: 10%;
            display: block;
            width: 200px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 24px;
            color: #fff;
            background: #959595;
        }

        .line{
            margin: 0 auto;
            width: 600px;
            height: 1600px;
            background: #e0e0e0;
        }
        /* ==============
           登录窗口 popup START
           ============== */
        .login-bg {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: rgba(0, 0, 0, 0.4);
            z-index: 1004;
        }

        .popup-content {
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -210px;
            margin-left: -220px;
            display: none;
            width: 440px;
            height: 420px;
            background: #fff;
            z-index: 10005;
        }
        .popup-content .close {
            position: absolute;
            right: 20px;
            top: 20px;
            display: block;
            width: 16px;
            height: 16px;
            cursor: pointer;
        }

        .popup-content .close img {
            width: 100%;
            height: 100%;
        }
        /* popup END */

html代码

<div class="wrapper">
    <a href="javascript:void(0);" class="login-btn">登录</a>
    <div class="line"></div>
    <!-- 弹出的窗口 -->
    <div class="popup-content" style="display: none;">
        <a href="javascript:void (0);" class="close">
            ![](./img/close.png)
        </a>
    </div>
    <div class="login-bg" style="display: none;"></div>
</div>

js代码

    $(function () {
        $(".login-btn").on("click", function () {
            $(".popup-content").show();
            $(".login-bg").show();
            $("body, html").css({"overflow": "hidden"});
        });
        $(".login-bg, .close").on("click", function () {
            $(".login-bg").hide();
            $(".popup-content").hide();
            $("body, html").css({"overflow": "auto"});
        });
    });