用JS实一个网页中登录窗口的显示/隐藏，页面中拖动移动，并且添加了边界判断的网页效果
代码如下
<!DOCTYPE html>
<html>
<head>
<style>
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}
#Box {
position: absolute;
width: 300px;
padding: 20px;
background: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.drag_header {
padding: 10px;
cursor: move;
background: #f0f0f0;
border-radius: 5px 5px 0 0;
}
</style>
</head>
<body>
<button onclick="showLogin()">显示登录框</button>
<div id="overlay" onclick="hideLoginIfOutside(event)">
<div id="Box">
<div class="drag_header">拖动</div>
<form>
<input type="text" placeholder="用户名"><br>
<input type="password" placeholder="密码"><br>
<button type="submit">登录</button>
</form>
</div>
</div>
<script>
const Box = document.getElementById('Box');
const overlay = document.getElementById('overlay');
function showLogin() {
overlay.style.display = 'block';
Box.style.left = '50%';
Box.style.top = '50%';
Box.style.transform = 'translate(-50%, -50%)';
}
function hideLogin() {
overlay.style.display = 'none';
}
function hideLoginIfOutside(event) {
if (!Box.contains(event.target)) {
hideLogin();
}
}
let isDragging = false;
let currentX = 0;
let currentY = 0;
let initialX = 0;
let initialY = 0;
Box.querySelector('.drag_header').addEventListener('mousedown', dragStart);
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', dragEnd);
function dragStart(x) {
isDragging = true;
initialX = x.clientX - Box.offsetLeft;
initialY = x.clientY - Box.offsetTop;
}
function drag(x) {
if (isDragging) {
x.preventDefault();
currentX = x.clientX - initialX;
currentY = x.clientY - initialY;
const maxX = window.innerWidth - Box.offsetWidth;
const maxY = window.innerHeight - Box.offsetHeight;
currentX = Math.min(Math.max(0, currentX), maxX);
currentY = Math.min(Math.max(0, currentY), maxY);
Box.style.left = currentX + 'px';
Box.style.top = currentY + 'px';
}
}
function dragEnd() {
isDragging = false;
}
</script>
</body>
</html>网页展示
