拖动的模态框

核心原理
1、给窗口title绑定鼠标按下事件；
2、获取鼠标到login盒子的x,y坐标存为变量（x=e.pageX-login.offsetLeft；y=e.pageY-login.offsetTop）
3、给docment绑定鼠标移动事件，当鼠标移动时，login盒子的left,top定位改为：style.left=e.pageX-x +'px';style.top=e.pageY-y +'px';
4、给docment绑定鼠标弹起事件，当鼠标弹起，移除鼠标移动事件；

JS

var link = document.querySelector('#link');
    var loginbg = document.querySelector('.login-bg');
    var login = document.querySelector('.login');
    var closeBtn = document.querySelector('#closeBtn');
    var title = document.querySelector('.login-title')
    link.addEventListener('click',function(){
        loginbg.style.display = 'block';
        login.style.display = 'block';
    })
    closeBtn.addEventListener('click',function(){
        loginbg.style.display = 'none';
        login.style.display = 'none';
    })

    // 鼠标拖动登录框
    // 获取鼠标的坐标
    title.addEventListener('mousedown',function(e){
        // e.pageX：鼠标距离window的x坐标距离 ，login.offsetLeft：login盒子距离window的left距离
        //  e.pageY：鼠标距离window的y坐标距离，login.offsetTop：login盒子距离window的top距离
        // 得到x,y是鼠标距离login盒子的left,top距离
        var x = e.pageX - login.offsetLeft;
        var y = e.pageY - login.offsetTop;
        // 当鼠标移动，修改盒子的位置；
        document.addEventListener('mousemove',move)

        // 单独封装一个函数
        function move(e){
            // login盒子左边定位=鼠标到左边window距离-鼠标到login左边盒子距离
            login.style.left = e.pageX - x + 'px';
            login.style.top = e.pageY - y + 'px';
        }

        // 鼠标弹起，移除鼠标移动事件；
        document.addEventListener('mouseup',function(){
            document.removeEventListener('mousemove',move)
        })
    })

CSS

* {
           padding: 0;
           margin: 0;
       }
       a {
           text-decoration: none;
           color: #333;
       }
       .login-header {
           width: 100%;
           height: 30px;
           font-size: 20px;
           line-height: 30px;
           /*想让盒子内文字居中，应该把text-align: center写在盒子本身上*/
           text-align: center;
       }

       .login-bg {
           display: none;
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background-color: #ccc;
           /* 显示在最底层 */
           z-index: -9999;
       }

       /* 登陆框 */
       .login {
           display: none;
           position: fixed;
           top: 50%;
           left: 50%;
           width: 512px;
           height: 280px;
           background-color: #fff;
           /* 显示在最顶层 */
           z-index: 9999;
           /* 水平垂直居中 */
           /* 往上（x轴）,左（y轴）移动自身长宽的 50% */
           transform: translate(-50%,-50%);
           border-radius: 5px;
       }
       .login-title {
           position: relative;
           height: 50px;
           line-height: 50px;
           margin-left: 20px;
           font-size: 18px;
       }
       .close-login {
           display: inline-block;
           width: 20px;
           height: 20px;
           line-height: 20px;
           text-align: center;
           border: 1px #333 solid;
           border-radius: 50%;
           position: absolute;
           top: 16px;
           left: 450px;
           font-size: 12px;
           cursor: pointer;
       }
       /* 用户名 */
       .list-input {
           width: 200px;
           height: 30px;
           line-height: 30px;
           border: none;
           border-radius: 20px;
           padding-left: 10px;
           background-color: #f6f6f6;
           outline: none;
       }
       .login-input {
           margin-bottom: 10px;
           outline: none;
       }
       .login-content {
           text-align: center;
           margin: 40px auto;
       }
       .login-content label {
           color: #757575;
           font-size: 16px;
           text-align: right;
           display: inline-block;
           width: 100px;
       }
       .login-button {
           width: 200px;
           height: 30px;
           line-height: 30px;
           border: none;
           border-radius: 20px;
           text-align: center;
           background-color: #000;
           margin: auto;
       }
       .login-button a {
           color: #fff;
       }

HTML

 <div class="login-header"><a href="javascript:;" id="link">点击，弹出登录框</a></div>
    <div class="login-bg"></div>
    <!-- 登陆框 -->
    <div class="login">
        <div class="login-title">登陆会员
            <span class="close-login" id="closeBtn">✖</span>
        </div>
        <!-- 用户名+密码 -->
        <div class="login-content">
            <div class="login-input">
            <label>用户名：</label>
            <input type="text" id="username" class="list-input" placeholder="请输入用户名" name="info[username]">
            </div>
            <div class="login-input">
                <label>登录密码：</label>
                <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
            </div>
        </div>
        <!-- 登陆按钮 -->
        <div id="loginBtn" class="login-button"><a href="javascript:;">登陆</a></div>
    </div>