js基础-拖动模态框小练习

鱼与云游

于 2022-12-25 17:49:31 发布

阅读量96

点赞数

文章标签： javascript 前端 html5 css3 css

本文链接：https://blog.csdn.net/weixin_51983027/article/details/128436689

版权

一、思路
二、代码，结果展示
总结

一、思路

分为三个模块，注册，弹出模态框按钮，遮盖层
注册模块要在最上面fixed，z-index?然后遮盖层
功能就是按下移动，模态框移动，松开事件消除
怎么计算盒子的移动？先获取固定的鼠标坐标和盒子坐标，然后如果移动，就用pageX-求出坐标的那个，没有单位，要加。

二、代码，结果展示

代码如下（示例）：

   <style>
        div,
        a,
        span,
        input{
            margin: 0;
            padding: 0;
        }
        .stickon{
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 20px;
        }
        a{
            text-decoration: none;
            color: black;
        }
        .login{
            display: none;
            width: 500px;
            height: 200px;
            border: 1px solid blue;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            z-index: 100;
        }
        .titles{
            position: relative;
            text-align: center;
            height: 30px;
            line-height: 30px;
            cursor: pointer;
        }
        .login-inputs{
            text-align: center;
            height: 80px;
            line-height: 40px;
        }
        .login-submit{
            text-align: center;
            height: 30px;
        }
        .convers{
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            background-color: pink;
        }
        .stickoff{
            position: absolute;
            right: -27px;
            top: -27px;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-radius: 50%;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="stickon"><a href="javascript:;">弹出模态框</a></div>
    <div class="login">
        <div class="titles"><span>登录</span>
        <div class="stickoff"><a href="javascript:;">关闭</a></div>
        </div>
        <div class="login-inputs">
            <div>
                <input type="text">
            </div>
            <input type="text">
        </div>
        <div class="login-submit">
            <button type="submit">登录</button>
        </div>
    </div>
    <div class="convers"></div>
    <script>
        var as=document.querySelector('a');
        var logins=document.querySelector('.login');
        var cvs=document.querySelector('.convers');
        var stioff=document.querySelector('.stickoff');
        var moves=document.querySelector('.titles');
        as.addEventListener('click',function(){
            logins.style.display='block';
            cvs.style.display='block';
        });
        stioff.addEventListener('click',function()
        {
            logins.style.display='none';
            cvs.style.display='none';
        });
        moves.addEventListener('mousedown',function(e){
            var x=e.pageX-logins.offsetLeft;
            var y=e.pageY-logins.offsetTop;
            document.addEventListener('mousemove',move)
            function move(e){
                logins.style.left=e.pageX-x+'px';
                logins.style.top=e.pageY-y+'px';
            }
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', move);
            })
        })
    </script>