<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模態框拖拽</title>
<style>
.click {
text-align: center;
cursor: pointer;
}
.login {
text-align: right;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
cursor: move;
}
.x {
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: aliceblue;
text-align: center;
position: absolute;
top: -4%;
right: -4%;
cursor: pointer;
box-shadow: 0 0 10px #ffffff;
z-index: 1;
}
table {
margin: auto;
background-color: aliceblue;
position: relative;
box-shadow: 0 0 10px #ffffff;
width: 270px;
height: 100px;
}
th {
text-align: center;
}
td {
height: 30px;
}
input {
outline: none;
}
.submit {
text-align: center;
}
.submit input {
cursor: pointer;
}
.gray {
background-color: rgba(220, 220, 220, 1);
background-color: gainsboro;
}
</style>
</head>
<body>
<div class="click">點擊，彈出登錄框</div>
<div class="login">
<table>
<div class="x">X</div>
<tr>
<th colspan="2">登錄會員</th>
</tr>
<tr>
<td><label for="one">用戶名：</label></td>
<td><input type="text" placeholder="請輸入用戶名" id="one"></td>
</tr>
<tr>
<td><label for="two">登錄密碼：</label></td>
<td><input type="password" placeholder="請輸入登錄密碼" id="two"></td>
</tr>
<tr>
<td colspan="2" class="submit"><input type="submit" value="登錄會員"></td>
</tr>
</table>
<script>
var login = document.querySelector('.login');
var x = document.querySelector('.x');
var click = document.querySelector('.click');
var body = document.body;
var table = document.querySelector('table');
click.addEventListener('click', function() {
body.className = "gray";
login.style.display = 'block';
})
x.addEventListener('click', function() {
body.className = "";
login.style.display = 'none';
/* 關閉後初始化 */
login.style.top = '50%';
login.style.left = '50%';
})
table.addEventListener('mousedown', function(e) {
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
/* 盒子內的距離 */
// console.log(x);
// console.log(y);
function move(e) {
// console.log(e.pageX - x);
// console.log(e.pageY - y);
/* 移動後盒子的距離 */
login.style.left = e.pageX - x + 'px';
login.style.top = e.pageY - y + 'px';
}
document.addEventListener('mousemove', move);
document.addEventListener('mouseup', function() {
/* 鼠標擡起後移除事件mousemove */
document.removeEventListener('mousemove', move);
})
})
</script>
</div>
</body>
</html>
