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代码

    登录
    

    
    

        
            ![](./img/close.png)
        
    
    

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"});
        });
    });