使用js 实现模态框拖拽

效果图如下：

1、搭建结构

分三步：1）设置（点击，弹出登录框）的链接；2）制作遮盖层；3）制作登录页面 登录页面又分为三部分：头部、登录内容部分、登录按钮，分别用三个div包裹起来 完整代码如下：

<div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框 <div id="bg" class="login-bg"> mask.style.display = 'block'; login.style.display = 'block'; }) // 点击关闭按钮 closeBtn ,让mask和login隐藏 closeBtn.addEventListener('click', function(e) { mask.style.display = 'none'; login.style.display = 'none'; }) // 拖拽 // (1) 当我们鼠标按下， 就获得鼠标在盒子内的坐标（也就是鼠标距离盒子左右的距离） title.addEventListener('mousedown', function(e) { // 首先得到鼠标在页面中的坐标（ e.pageX, e.pageY） // 其次得到盒子在页面中的距离(login.offsetLeft, login.offsetTop) // 用鼠标距离页面的坐标减去盒子在页面中的距离， 得到 鼠标在盒子内的坐标 var x = e.pageX - login.offsetLeft; var y = e.pageY - login.offsetTop; // (2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值 document.addEventListener('mousemove', move) function move(e) { login.style.left = e.pageX - x + 'px'; login.style.top = e.pageY - y + 'px'; } // (3) 鼠标弹起，就让鼠标移动事件移除 document.addEventListener('mouseup', function() { document.removeEventListener('mousemove', move) }) }) </script>