web第三次作业

弹窗案例

1.首页代码

<!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 EDU</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>

2.展示效果