2023-07-24T15:07:44.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>





*{
    padding:0px;
    margin:0px;
}

.login-input-content{
    margin-top:20px;

}
a#closeBtn {
    height: 16px;
    position: absolute;
    right: 16px;
    top: 12px;
    top: 8px;
    z-index: 100;
}

.login{
    display: none;
    width: 512px;
    position:absolute;
    border:#ebebeb solid 1px;
    height:280px;
    left:50%;
    right:50%;
    background:#fff;
    box-shadow:0px 0px 20px #ddd;
    z-index:9999;
    margin-left:-256px;
    margin-top:140px;
    display:none;


}

.login-title{
    width:100%;
    margin:10px 0px 0px 0px;
    text-align:center;


}
a{
    text-decoration:none;
    color:#000;
}

.login-button,.login-input{
    width:50%;
    margin:30px auto 0px auto;
    line-height:40px;
    font-size:14px;
    border:#ebebeb 1px solid;
    text-align: center;
}

.login-header {
    text-align: center;
}

.login-bg{
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    background:#000;
    filter:aleha(opacity=30);
    -moz-opacity:0.3;
    -khtml-opacity:0.3;
    opacity:0.3;
    display:none;



}



    </style>
</head>
<body>
    
<div class="login-header">
    <a id="link" href="javascript:void(0);">点击，弹出登录框</a>
</div>

<div id="login" class="login">
    <div id="title" class="login-title">用户登录
        <span>
            <a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a>
        </span>
    </div>


    <div calss="login-inputcontent">
        <div class="login-input">
        <label>用户名：</label>
        <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
        </div>

        <div class="login-input">
        <label>登录密码：</label>
        <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
        </div>

    </div>

    <div id="loginBtn" class="login-button">
    <a href="javascript:void(0);" id="login-button-submit">登录</a>
    </div>



</div>





<!--覆盖层-->

<div id="bg" class="login-bg"></div>

<script>
    //获取元素
    //点击弹出登录框
    var link = document.getElementById("link");

    var login = document.getElementById("login");
    var bg = document.getElementById("bg");
    var closeBtn = document.getElementById("closeBtn");


    link.onclick = function(){
        login.style.display = "block";
        bg.style.display = "block";

    }

//添加btn的点击事件，让登录窗口和遮盖层隐藏

closeBtn.onclick = function(){

    login.style.display = "none";
    bg.style.display = "none";
}

</script>

</body>
</html>