JavaScript单击登录会员前端样式5.23

最新推荐文章于 2024-06-19 16:19:47 发布

MC风启Ya

最新推荐文章于 2024-06-19 16:19:47 发布

阅读量224

点赞数 6

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/2302_80283029/article/details/139150969

版权

点单击可弹出用户登录页面登录会员可关闭页面可拖动

<!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>
        .box {
            border: 1px solid gray;
            width: 500px;
            height: 200px;
            text-align: center;
            position: absolute;
            display: flex;
           
            flex-direction: column;
            justify-content: space-around;
            display: none;
            cursor: move;
        }

        .item {
            display: flex;
            justify-content: center;
        }

        .close {
            width: 15px;
            height: 15px;
            border: 1px solid gray;
            border-radius: 50%;
            position: absolute;
            right: -7px;
            top: -7px;
            text-align: center;
            line-height: 15px;
        }

        button {
            background: orange;
            color: #fff;
            border: 0;
            width: 120px;
            padding: 5px;
            border-radius: 15px;
        }

        h2 {
            text-align: center;
        }
    </style>
</head>


<body>
    <h2>单击，登录会员</h2>

    <div class="box">
        <h3>用户登录</h3>
        <div class="item">
            <div>用户名：</div>
            <input type="text">
        </div>
        <div class="item">
            <div>密&nbsp;&nbsp;&nbsp;码：</div>
            <input type="password">
        </div>
        <div class="btn">
            <button>登录</button>
        </div>
        <div class="close">X</div>
    </div>
</body>
<script>
    let header = document.querySelector("h2")
    let box = document.querySelector(".box")
    let close = document.querySelector(".close")
 
    header.addEventListener("click", function () {
        box.style.display = "flex"
    })
   
    let isDown = false
    let px=0,py=0
    box.addEventListener("mousedown", function (e) {
        isDown = true
        px=e.pageX-box.offsetLeft
        py=e.pageY-box.offsetTop
    })
    document.addEventListener("mousemove", function (e) {
        if (isDown) {
            box.style.left = e.pageX-px + "px"
            box.style.top = e.pageY-py + "px"
        }
    })
    box.addEventListener("mouseup",function(){
             isDown=false
    })
    close.addEventListener("click",function(){
             box.style.display="none";
    })
</script>

</html>