效果如下：
代码如下：
<div class="clickBtn">点击，弹出登录框</div>
<div class="login">
<h3>登录会员</h3>
<table>
<tr>
<td class="left">用户名：</td>
<td><input type="text" placeholder="请输入用户名" name="" id=""></td>
</tr>
<tr>
<td class="left">登陆密码：</td>
<td><input type="text" placeholder="请输入登录密码" name="" id=""></td>
</tr>
</table>
<button>登录会员</button>
<div class="closebtn">关闭</div>
</div> <div class="mask"></div>
style:
<style>
* {
margin: 0;
padding: 0;
} .mask {
display: none;
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100%;
background-color: rgba(0, 0, 0, .3);
} .clickBtn {
margin: 10px auto;
width: 200px;
border: 0px;
font-size: 20px;
font-weight: 700;
background-color: #fff;
cursor: pointer;
} .login {
visibility: hidden; position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); display: flex;
flex-direction: column;
align-items: center; padding: 20px;
box-sizing: border-box; width: 500px;
height: 300px;
border: 1px solid #eee;
background-color: #fff;
z-index: 1;
} .login h3 {
margin-bottom: 20px;
font-size: 20px;
font-weight: 400;
height: 30px;
width: 100%;
text-align: center;
cursor: move;
} .login table {
flex: 1;
display: flex;
margin: 0;
padding: 0; } .login table tr {
height: 50px;
text-align: right;
} .login table tr input {
width: 300px;
height: 30px;
border-radius: 2px;
border: 1px solid #eee;
} .login table .left {
font-weight: 400;
width: 40%;
} .login button {
width: 260px;
height: 40px;
background-color: #fff;
border: 1px solid #eee;
border-radius: 2px;
cursor: pointer;
} .login button:hover {
color: #fff;
background-color: skyblue;
} .login .closebtn {
position: absolute;
right: 0;
top: 0;
transform: translate(50%, -50%);
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: orange;
border-radius: 50%;
cursor: pointer;
}
</style>
js:
<script>
let btn = document.querySelector('.clickBtn')
let login = document.querySelector('.login')
let closebtn = document.querySelector('.closebtn')
let mask = document.querySelector('.mask') let title = document.querySelector('h3')
let body = document.querySelector('body')
btn.addEventListener('click', function () {
mask.style.display = 'block'
login.style.visibility = 'visible'
}) closebtn.addEventListener('click', function () {
mask.style.display = 'none'
login.style.visibility = 'hidden'
}) title.addEventListener('mousedown', function (e) {
let x = e.pageX - login.offsetLeft
let y = e.pageY - login.offsetTop
function move(e) {
// 如果此处仍然用 x=e.pageX - x;login.style.left=x+'px' 就会出现错误，因为这里是浅拷贝，引用的是同一个地址，而mousedown事件一直触发mousemove事件，导致x对应地址的值一直在改变，且login.style.left=x+'px' 指向的也是这个地址，所以页面的区域就会出现晃动
var xx = e.pageX - x;
var yy = e.pageY - y;
console.log(x, y);
login.style.top = yy + 'px';
login.style.left = xx + 'px'; } // 在页面任何地方都应触发mousemove，故监听document的mousemove事件
document.addEventListener('mousemove', move) // 在页面任何地方都应触发mouseup，故监听document的mouseup事件
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove', move)
})
})
</script>
