<body>
<style>
.mobanbox {
width: 100%;
height: 100%;
background-color: rgba(202, 239, 247, 0.8);
position: fixed;
left: 0px;
top: 0px;
}
.loginbox {
width: 300px;
height: 300px;
margin: 0 auto;
background-color: darkorchid;
border-radius: 20%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<button class="btn">登录</button>
<script>
window.onload = function () {
let btn = document.querySelector(".btn");
//创建一个半透明的蒙版层
var mobanbox = document.createElement("div");
mobanbox.className = "mobanbox";
//创建登录框
var loginbox = document.createElement("div");
loginbox.className = "loginbox";
btn.onclick = function () {
document.body.insertBefore(mobanbox, btn);
mobanbox.appendChild(loginbox);
loginbox.addEventListener("mouseup", (e) => {
//解绑登录框添加鼠标鼠标按下事件
document.onmousemove = null;
});
};
//给登录框添加鼠标鼠标按下事件
loginbox.addEventListener("mousedown", function fn(event) {
//登录框在随着鼠标在页面中（body元素中）移动
//获取鼠标按下时x,y的位置：需要登录盒子相对于最近的定位的父级元素（mobanbox）的盒子的x,y值
//mobanbox盒子是固定定位，top和left是0，就相当于可以获取鼠标相对于页面的x,y值
let x = event.clientX;
let y = event.clientY;
let loginboxtop = loginbox.offsetTop;
let loginboxleft = loginbox.offsetLeft;
//鼠标移动事件绑定给document对象，避免鼠标不小心滑出登录框盒子也一样可以在整个页面移动
document.onmousemove = function fg(event) {
//获取鼠标指针滑动过程中相对于页面的x,y位置
let x1 = event.clientX;
let y1 = event.clientY;
//让盒子移动相同的差值
//元素.offsetTop：相对第一个（最近的）父级参照物有定位属性的上偏移量
loginbox.style.top = loginboxtop + (y1 - y) + "px";
loginbox.style.left = loginboxleft + (x1 - x) + "px";
};
});
};
</script>
</body>
设置元素的left和topCSS样式，需要将元素定位，否则不会生效。
