Web - JavaScript - 实现拖动对话框（模态框）

效果

核心代码

<script>
        //获取元素
        var click = document.querySelector('.login-header a');
        var login = document.querySelector('.login');
        var box = document.querySelector('.box');
        var close = document.querySelector('.close-login');
        var title = document.querySelector('#title')
        var bg = document.querySelector('.login-bg');

        //(1)登录框的弹出与退出
        //点击上方文字弹出对话框,出现遮罩
        click.addEventListener('click', function () {
            login.style.display = 'block';
            bg.style.display = 'block';
        })

        //点击关闭的×号,关闭对话框,遮罩消失
        close.addEventListener('click', function () {
            login.style.display = 'none';
            bg.style.display = 'none';
        })
        //(2)登录框的拖动
        // 鼠标按下
        title.addEventListener('mousedown', function (e) {
            //当鼠标按下,且移动的时候,鼠标在整个页面的坐标e.pageX - 登录框和页面边的距离(offsetLeft/offsetTop） =鼠标在登录框里的位置
    //这个位置是固定的，无论之后怎么拖动登录框，鼠标在登录框里的位置是固定的，除非你松开后再点
            var fixX = e.pageX - login.offsetLeft;
            var fixY = e.pageY - login.offsetTop;
        //鼠标移动
            document.addEventListener('mousemove', move);
            function move(e) {
                login.style.marginLeft = 0;
                login.style.left = e.pageX - fixX + 'px';
                login.style.top = e.pageY - fixY + 'px';
                //这里的e.pageX是页面移动后的值,和上面的e.pageX不相等
            }
        //鼠标抬起
            document.addEventListener('mouseup', function () {
                document.removeEventListener('mousemove', move)
            })
        })
    </script>
           

结构层

<div class="login-header">
        <a href="javascript:;" target="_blank" rel="external nofollow" >点击弹出登录框</a>
    </div>
    <div class="box">

        <!--登录框 -->
        <div id="login" class="login">
            <div id="title" class="login-title">登录会员
                <span> <a href="javascript:void(0);" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  class="close-login">×</a></span>
            </div>
            <div class="login-input-content">
                <div class="login-input">
                    <label>用户名：</label>
                    <input type="text" placeholder="请输入用户名" name="info[username]" id='username'>
                </div>

                <div class="login-input">
                    <label>登陆密码：</label>
                    <input type="text" placeholder="请输入密码" name='info[password]' id='password'>
                </div>
            </div>
            <div class="loginBtn" id="login-button">
                <a href="javascript:void(0);" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  id="login-button-submit">登录会员</a>
            </div>
        </div>

        <!-- 遮盖层 -->
        <div class="login-bg" id='bg'></div>

    </div>
           

样式层

<style>
        a {
            text-decoration: none;
            color: black;
        }
    
        input {
            outline:none;
        }

        .login,
        .login-bg {
            display: none;
        }

        .login {
            position: absolute;
            top: 100px;
            left: 50%;
            margin-left: -250px;
            width: 500px;
            height: 280px;
            background-color: white;
            border-radius: 15px;
            /* margin: 100px auto; */
        }


        /* 标题 */


        .login-header {
            text-align: center;
            font-weight: 600;
        }


        .login-title {
            position: relative;
            text-align: center;
            padding: 20px 0;
            font-weight: 600;
        }


        .login-title a {
            position: absolute;
            display: block;
            top: 0px;
            right: 5px;
            border-radius: 15px;
            width: 30px;
            height: 30px;
            background-color: #fff;
            font-size: 16px;
            text-align: center;
            line-height: 30px;
            font-weight: 400;
        }


        /* 登录主体 */


        .login-input {
            margin-bottom: 20px;
            float: left;

        }

        .login-input label {
            float: left;
            width: 90px;
            padding-right: 10px;
            font-size: 12px;
            text-align: right;
            height: 35px;
            line-height: 35px;

        }

        .login-input input {
            width: 300px;
            border: 1px solid #ccc;
            height: 30px;
            line-height: 30px;
        }

        /* 登录会员按钮 */
        .loginBtn a {
            position: absolute;
            float: left;
            top: 200px;
            left: 130px;
            width: 200px;
            height: 30px;
            line-height: 30px;
            text-decoration: none;
            text-align: center;
            color: black;
            font-size: 14px;
            font-weight: 600;
            border: 1px solid #ccc;
            padding: 5px 20px;
            /* background-color: purple; */
        }

        /* 背景 */

        .login-bg {
            position: absolute;
            top: 0;
            left: 0;
            background-color: #afb2af;
            width: 100%;
            height: 100%;
            z-index: -1;  
        }
    </style>