JS 弹出框拖拽

css代码

         body {
             margin:;
             text-align: center;
         }
         .box {
             display: none;
             background-color: #fff !important;
             width: 400px;
             height: 300px;
             position: absolute;
             top: 30%;
             left: 40%;
             z-index:;
         }
         .logo {
             width: 100%;
             height: 60px;
         }
         .login-bg {
             display: none;
             width: 100%;
             height: 100vh;
             background: black;
             opacity: 0.5;
             position: absolute;
             top:;
         }
         button {
             float: right;
         }
         .login-header {
             cursor: pointer;
             margin: 0 auto;
             line-height: 60px;
         }
         .login-header a {
             text-decoration: none;
             color: black;
             font-size: 20px;
         }

  <div class="login-header">
         <a id="link" href="javascript:;">点击弹出模态框</a>
     </div>
     <div class="box">
         <div class="logo">
             <button class="btn">关闭</button>
         </div>
     </div>
     <div class="login-bg mask"></div>

JS代码

  var link = document.querySelector('#link')
         var box = document.querySelector('.box')
         var mask = document.querySelector('.mask')
         var btn = document.querySelector('.btn')
         var title = document.querySelector('.logo')
         // 鼠标点击弹出模态框时弹出
         link.addEventListener('click', function () {
             mask.style.display = 'block'
             box.style.display = 'block'
         })
         // 鼠标再次点击时关闭
         btn.addEventListener('click', function () {
             mask.style.display = 'none'
             box.style.display = 'none'
         })
         // 开始拖拽
         title.addEventListener('mousedown', function (e) {
             var x = e.pageX - box.offsetLeft;
             var y = e.pageY - box.offsetTop;
             console.log(x, y);
             // 鼠标移动的时候把鼠标在页面中的坐标减去鼠标在盒子内的坐标就是模态框的left和top的值了
             document.addEventListener('mousemove', move)
             function move(e) {
                 box.style.left = e.pageX - x + 'px'
                 box.style.top = e.pageY - y + 'px'
             }
             // 鼠标弹起就让移动事件移除
             document.addEventListener('mouseup', function () {
                 document.removeEventListener('mousemove',move)
             })
         })

效果图