登录弹窗效果

1，要求
点击登录按钮，弹出登录窗口
提示1：登录窗口 display:none 隐藏状态；
提示2：登录按钮点击后，触发事件，修改 display:block 显示状态
提示3：登录窗口中点击关闭按钮，触发事件，修改 display:none 隐藏状态
代码演示
html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录窗口</title>
    <style>
        *{margin: 0; padding: 0;box-sizing: border-box;}
        html,body{width: 100%;height: 100%;}
        .container{width: 100%;height: 100%;background-color: #f2f1f2;}
        header{
            width: 1200px;
            height: 50px;
            background-color: #fff;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        header div:nth-of-type(2){
            display: flex;
            gap: 20px;
            cursor: pointer;
        }
        header div:nth-of-type(2) span:hover{
            font-weight: bolder;
            color: red;
        }
        .login-box{
            display: none;
            overflow: hidden;
            width: 300px;
            height: 200px;
            background-color: #fff;
            border: solid 1px orangered;
            border-radius: 8px;
            box-shadow: rgba(255,0,0,0.5) 5px 5px 5px;
            position: absolute;
            left: 1150px;
            top: 50px;
        }
        .login-box .header{
            height: 40px;
            background-color: orangered;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: white;
            cursor: pointer;
            padding: 0 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div>
                <span>欢迎访问OPENLAB</span>
            </div>
            <div>
                <span id="login">登录</span>
                <span id="register">注册</span>
            </div>
            <!-- 登录框 -->
            <div class="login-box" id="login-box">
                <div class="header" id="header">
                    <span>会员登录</span>
                    <span id="close">[关闭]</span>
                </div>
            </div>
        </header>
    </div>  
    <script>
        //获取登录按钮
        let _login = document.getElementById("login");
        let _login_box = document.getElementById("login-box");
        //登录按钮添加事件
        _login.onclick = function(){
            _login_box.style.display = "block";
        }
        //获取关闭按钮
        let _close = document.getElementById("close");
        _close.onclick = function(){
            _login_box.style.display = "none";
        }
        let _header = document.getElementById("header");
        //鼠标按下事件
        document.onmousedown = function(event){
            let offsetX = event.offsetX;
            let offsetY = event.offsetY;
            //窗口移动事件
            _header.onmousemove = function(event2){
                let mouseX = event2.clientX;
                let mouseY = event2.clientY;

                let loginX = mouseX - offsetX;
                let loginY = mouseY - offsetY;

                //------------------边界判断
                //左边界
                if(loginX <= 0){
                    loginX = 0;
                }
                //上边界
                if(loginY <= 0){
                    loginY = 0;
                }
                //右边界
                let iw = window.innerWidth; //浏览器窗口宽度
                let lw = getComputedStyle(_login_box).width; //登录窗宽度
                lw = parseInt(lw);  //转换数据类型
                if(loginX >= (iw - lw)){
                    loginX = iw - lw;
                }
                //下边界
                let ih = window.innerHeight;
                let lh = getComputedStyle(_login_box).height;
                lh = parseInt(lh);
                if(loginY >= (ih - lh)){
                    loginY = ih - lh;
                }
                //设置登录样式
                _login_box.style.left = loginX + "px";
                _login_box.style.top = loginY + "px";
            }
        }
        //鼠标抬起事件
        document.onmouseup = function(){
            _header.onmousemove = null;
        }
    </script>
</body>
</html>
效果