<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* body {
background-color: gray;
} */
.click {
margin: 0 auto;
font-size: 20px;
width: 200px;
height: 30px;
text-align: center;
}
.login {
display: none;
position: fixed;
top: 200px;
left: 50%;
transform: translateX(-250px);
width: 500px;
height: 300px;
background-color: white;
box-shadow: 0px 0px 3px 3px rgba(247, 244, 244, 0.63);
}
.cross {
position: absolute;
display: block;
top: -20px;
right: -20px;
height: 40px;
width: 40px;
border-radius: 20px;
border: 1px solid gray;
background-color: white;
text-align: center;
line-height: 40px;
box-shadow: 0px 0px 3px 3px rgba(247, 244, 244, 0.63);
}
.dragarea {
/* margin-bottom: 20px; */
position: relative;
height: 80px;
width: 100%;
line-height: 80px;
text-align: center;
/* background-color: pink; */
}
.user {
margin: 20px 0;
}
input {
width: 300px;
height: 30px;
outline: none;
border: none;
border: 1px solid lightgray;
color: gray;
}
label {
display: inline-block;
width: 100px;
height: 30px;
text-align: right;
}
#account {
margin: 20px auto;
height: 30px;
width: 250px;
border: 1px solid lightgray;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div class="click">
点击弹出登录框
</div>
<div class="login">
<div class="dragarea">登录会员
<div class="cross">关闭</div>
</div>
<div class="user"><label for="username">用户名:</label><input type="text" value="请输入用户名" name="username"></div>
<div class="pwd"><label for="username">登录密码:</label><input type="text" value="请输入登录密码" name="username"></div>
<div id="account">登陆会员</div>
</div>
<script>
var bd = document.querySelector('body');
var btn = document.querySelector(".click");
var login = document.querySelector('.login');
var drag = document.querySelector('.dragarea');
var hide = document.querySelector('.cross');
btn.addEventListener('click', function() {
bd.style.backgroundColor = "gray";
login.style.display = 'block';
})
var innerX = null;
var innerY = null;
hide.addEventListener('click', function() {
bd.style.backgroundColor = "";
login.style.display = 'none';
})
drag.addEventListener('mousedown', function(e) {
console.log("mousedown");
var loginX = login.offsetLeft;
var loginY = login.offsetTop;
innerX = e.clientX - loginX;
innerY = e.clientY - loginY;
console.log(innerX, innerY);
drag.addEventListener('mousemove', fun);
function fun(e) {
console.log("mousemove");
login.style.left = e.clientX - innerX + 'px';
login.style.top = e.clientY - innerY + 'px';
}
drag.addEventListener('mouseup', function() {
console.log("mouseup");
drag.removeEventListener('mousemove', fun);
});
})
</script>
</body>
</html>
前端案例-17 模态框的拖拽
最新推荐文章于 2022-09-16 18:56:14 发布