<!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: 0;
margin: 0;
}
a {
text-decoration: none;
color: #333;
}
.click_button {
position: absolute;
left: 45%;
}
.background {
display: none;
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
}
.login {
position: absolute;
left: 50%;
top: 50%;
width: 400px;
height: 200px;
text-align: center;
background-color: #fff;
box-shadow: 0px 0px 20px #ddd;
z-index: 3;
transform: translate(-50%, -50%);
}
.login h3 {
width: 100%;
height: 40px;
line-height: 40px;
margin: 10px 0;
cursor: move;
}
.login .username {
margin-bottom: 10px;
}
.login input {
height: 25px;
margin-left: 10px;
padding-left: 10px;
}
.login .password {
margin-bottom: 10px;
margin-left: -14px;
}
.login_botton {
display: block;
margin: 20px auto;
width: 50%;
height: 40px;
line-height: 40px;
border: #ebebeb 1px solid;
}
.login .close_button {
position: absolute;
width: 40px;
height: 40px;
line-height: 40px;
background-color: #fff;
font-size: 12px;
right: -20px;
top: -30px;
border: #ebebeb solid 1px;
border-radius: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<a href="javascript:;" class="click_button">点击,弹出登录框</a>
<div class="background">
<div class="login">
<h3 class="title">登陆会员</h3>
<div class="username">
<span>用户名:</span>
<input type="text" placeholder="请输入用户名">
</div>
<div class="password">
<span>登陆密码:</span>
<input type="password" placeholder="请输入登陆密码">
</div>
<a href="javascript:;" class="login_botton">登陆会员</a>
<span class="close_button">关闭</span>
</div>
</div>
<script>
var click_button = document.querySelector('.click_button');
var bg = document.querySelector('.background');
var close_button = document.querySelector('.close_button');
var title = document.querySelector('.title');
var login = document.querySelector('.login')
// 2. 点击弹出层的按钮 弹出登录框
click_button.addEventListener('click', function () {
bg.style.display = 'block';
});
//
close_button.addEventListener('click', function () {
bg.style.display = 'none';
});
// (1)当我们按下鼠标 获得鼠标在盒子内的坐标
title.addEventListener('mousedown', function (e) {
var x = e.pageX - login.offsetLeft;
var y = e.pageY - login.offsetTop;
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 () {
document.removeEventListener('mousemove', move);
})
})
</script>
</body>
</html>
弹出框组件
最新推荐文章于 2023-08-22 13:46:29 发布