<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> h2 { text-align: center; } #login { width: 500px; margin: 0 auto; position: fixed; display: none; /* top: 100px; left: 100px; */ top: 50%; left: 50%; transform: translate(-50%, -50%); } table { width: 500px; height: 260px; background: white; } td, th { line-height: 35px; height: 40px; } input { width: 350px; height: 30px; border: lavender 1px solid; outline: none; } .fonts { text-align: right; font-size: 14px; width: 110px; } button { margin: 0 auto; background: white; border: lavender 1px solid; width: 270px; height: 38px; outline: none; cursor: pointer; } .box { font-size: 14px; line-height: 40px; text-align: center; width: 42px; height: 40px; border: lavender 1px solid; border-radius: 55%; background: white; position: absolute; top: -20px; right: -21px; cursor: pointer; } </style> </head> <body> <h2>点击，弹出登录框</h2> <div id="login"> <div class="box">关闭</div> <table> <tr> <th colspan="2">登录会员</th> </tr> <tr> <td class="fonts">用户名：</td> <td><input type="text" id="uname" placeholder="请输入用户名"></td> </tr> <tr> <td class="fonts">登录密码：</td> <td><input type="password" id="pwd" placeholder="请输入登录密码"></td> </tr> <tr> <td colspan="2" align="center"><button>登录会员</button></td> </tr> </table> </div> <script> var h2 = document.querySelector('h2'); var box = document.querySelector('.box'); var login = document.querySelector('#login'); var th = document.querySelector('th'); var x, y; // 弹出层开始 h2.addEventListener('click', function() { login.style.display = 'block'; document.body.style.backgroundColor = '#ccc'; }); box.onclick = function() { login.style.display = 'none'; document.body.style.backgroundColor = ''; } // 弹出层结束 th.addEventListener('mousedown', function(e) { // 计算点击后鼠标位置 距离 盒子上、 左边框的距离 var x = e.pageX - login.offsetLeft; var y = e.pageY - login.offsetTop; th.style.cursor = 'move'; //在页面中的任何位置都可以移动鼠标，所以事件源是document document.addEventListener('mousemove', move) function move(e) { // 用鼠标在页面中点击的位置 减去 鼠标距离盒子左、上边框的距离 得到 盒子距离页面边框的距离 var loginX = e.pageX - x; var loginY = e.pageY - y; // 限制遮盖层的移动范围 loginX = loginX < 250 ? loginX = 250 : loginX; loginX = loginX > 1100 ? loginX = 1100 : loginX; loginY = loginY < 150 ? loginY = 150 : loginY; loginY = loginY > 500 ? loginY = 500 : loginY; login.style.left = loginX + 'px'; login.style.top = loginY + 'px'; } document.addEventListener('mouseup', function(e) { th.style.cursor = 'default'; document.removeEventListener('mousemove', move); //删除移动的监听事件 }) }) </script> </body> </html>