<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
h2 {
text-align: center;
}
#login {
width: 500px;
margin: 0 auto;
position: fixed;
display: none;
/* top: 100px;
left: 100px; */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
table {
width: 500px;
height: 260px;
background: white;
}
td,
th {
line-height: 35px;
height: 40px;
}
input {
width: 350px;
height: 30px;
border: lavender 1px solid;
outline: none;
}
.fonts {
text-align: right;
font-size: 14px;
width: 110px;
}
button {
margin: 0 auto;
background: white;
border: lavender 1px solid;
width: 270px;
height: 38px;
outline: none;
cursor: pointer;
}
.box {
font-size: 14px;
line-height: 40px;
text-align: center;
width: 42px;
height: 40px;
border: lavender 1px solid;
border-radius: 55%;
background: white;
position: absolute;
top: -20px;
right: -21px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>点击，弹出登录框</h2>
<div id="login">
<div class="box">关闭</div>
<table>
<tr>
<th colspan="2">登录会员</th>
</tr>
<tr>
<td class="fonts">用户名：</td>
<td><input type="text" id="uname" placeholder="请输入用户名"></td>
</tr>
<tr>
<td class="fonts">登录密码：</td>
<td><input type="password" id="pwd" placeholder="请输入登录密码"></td>
</tr>
<tr>
<td colspan="2" align="center"><button>登录会员</button></td>
</tr>
</table>
</div>
<script>
var h2 = document.querySelector(‘h2‘);
var box = document.querySelector(‘.box‘);
var login = document.querySelector(‘#login‘);
var th = document.querySelector(‘th‘);
var x, y;
// 弹出层开始
h2.addEventListener(‘click‘, function() {
login.style.display = ‘block‘;
document.body.style.backgroundColor = ‘#ccc‘;
});
box.onclick = function() {
login.style.display = ‘none‘;
document.body.style.backgroundColor = ‘‘;
}
// 弹出层结束
th.addEventListener(‘mousedown‘, function(e) {
// 计算点击后鼠标位置 距离 盒子上、 左边框的距离
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
th.style.cursor = ‘move‘;
//在页面中的任何位置都可以移动鼠标，所以事件源是document
document.addEventListener(‘mousemove‘, move)
function move(e) {
// 用鼠标在页面中点击的位置 减去 鼠标距离盒子左、上边框的距离 得到 盒子距离页面边框的距离
login.style.left = e.pageX - x + ‘px‘;
login.style.top = e.pageY - y + ‘px‘;
}
document.addEventListener(‘mouseup‘, function(e) {
th.style.cursor = ‘default‘;
document.removeEventListener(‘mousemove‘, move); //删除移动的监听事件
})
})
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/qtbb/p/11700839.html
时间： 2024-11-05 18:41:44