<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.box {
width: 980px;
height: 500px;
margin: 50px auto;
background-color: #FFFEE7;
position: relative;
text-align: center;
overflow: hidden;
}
.mask {
width: 980px;
height: 500px;
position: absolute;
left: 0px;
top: 0px;
background-color: rgba(0, 0, 0, 0.5);
display: none;
}
.main {
width: 400px;
height: 240px;
padding: 15px;
background-color: #FFFEE7;
position: absolute;
right: 50%;
margin-right: -200px;
bottom: 50%;
margin-bottom: -120px;
text-align: center;
display: none;
}
h4 {
margin-bottom: 20px;
}
input[type=text] {
width: 300px;
height: 30px;
border: none;
outline: none;
border: 1px solid #ccc;
margin-top: 20px;
background: #FFFEE7;
}
input[type=button] {
width: 200px;
height: 35px;
border: none;
outline: none;
border: 1px solid #ccc;
margin-top: 30px;
background-color: #FFFEE7;
font-size: 14px;
}
span {
font-size: 14px;
}
.X {
position: absolute;
right: 0px;
top: 0px;
color: #ccc;
font-size: 18px;
margin: 6px 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<div class="mask"></div>
<h3>点击登录</h3>
<div class="main">
<h4>登录会员</h4>
<span> 用户名: </span>
<input type="text" placeholder="请输入用户名">
<br>
<span>登录密码: </span>
<input type="text" placeholder="请输入登录密码">
<input type="button" value="登录会员">
<div class="X">X</div>
</div>
</div>
<script>
var main = document.querySelector('.main'); //移动的盒子
console.log(main);
var clicks = document.querySelector('h3'); //点击登录
console.log(clicks);
var mask = document.querySelector('.mask'); //蒙版
var vip = document.querySelector('input[type=button');
var X = document.querySelector('.X')
console.log(vip);
console.log(mask);
clicks.onclick = function() {
mask.style.display = 'block';
main.style.display = 'block';
}
vip.onclick = X.onclick = function() {
mask.style.display = 'none';
main.style.display = 'none';
}
main.onmousedown = function(e) {
console.log(main.offsetLeft);
console.log(e.clientY);
// mainX,mainY鼠标距离盒子边缘的偏移量
var mainX = e.clientX - main.offsetLeft;
var mainY = e.clientY - main.offsetTop;
console.log(mainX);
console.log(mainY);
document.onmousemove = function(e) {
main.style.left = e.clientX - mainX + 'px';
main.style.top = e.clientY - mainY + 'px';
console.log(main.style.left);
console.log(main.style.top);
};
};
document.onmouseup = function() {
document.onmousemove = 'none';
};
</script>
</body>
</html>
