功能:
- 点击弹出模态框和遮罩层
- 点击关闭可回到最初状态
- 在头部按下鼠标可移动小窗口(拖拽功能)
界面如下:
HTML代码:
<div class="on">
<a href="javascript:;">点击,弹出模态框</a>
</div>
<div class="loginBG"></div>
<div class="login">
<div class="title">会员登录</div>
<div class="content">
<div class="input">
<label for="">用户名:</label>
<input type="text" placeholder="请输入用户名...">
</div>
<div class="input">
<label for="">密码:</label>
<input type="password" placeholder="请输入密码...">
</div>
</div>
<div class="btn">
<input type="button" value="登录会员">
</div>
<div class="close">
<a href="javascript:;">关闭</a>
</div>
</div>
css样式:
* {
margin: 0;
padding: 0;
}
body {
background-color: teal;
}
.on {
width: 500px;
font-size: 30px;
margin: 20px auto;
text-align: center;
}
a {
color: black;
text-decoration: none;
}
.login {
display: none;
position: absolute;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
/* 盒子阴影:水平位移 垂直位移 模糊度 颜色 */
box-shadow: 0px 0px 10px white;
text-align: center;
}
.title {
width: 500px;
margin: 20px auto;
font-size: 25px;
cursor: move;
}
.content {
margin: 0px auto 5px;
padding: 0px 20px 5px;
}
.input {
margin-top: 10px;
height: 40px;
line-height: 40px;
font-size: 16px;
padding: 10px;
}
.input label {
float: left;
width: 70px;
text-align: right;
}
.input input {
outline: none;
float: left;
width: 330px;
padding-left: 5px;
height: 38px;
border: 1px solid rgb(233, 231, 231);
}
.btn input {
width: 200px;
height: 40px;
font-size: 16px;
background-color: white;
border: 1px solid rgb(233, 231, 231);
outline: none;
}
.close {
position: absolute;
right: -15px;
top: -15px;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 12px;
background-color: white;
border-radius: 50%;
box-shadow: 0px 0px 10px white;
}
/* 遮罩层 */
.loginBG {
display: none;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.527);
}
JavaScript代码如下:
功能:点击显示遮罩层和登录小窗口
var login = document.querySelector('.login');
var on = document.querySelector('.on');
var loginBG = document.querySelector('.loginBG');
on.addEventListener('click', function () {
login.style.display = 'block';
loginBG.style.display = 'block';
})
// 点击关闭时不显示(我发现当前面的关闭的a链接里是空空的,它就可以不用写就有这功能哎)
var close = document.querySelector('.close');
close.addEventListener('click', function () {
login.style.display = 'none';
loginBG.style.display = 'none';
})
功能:鼠标按下移动小窗口,鼠标放开固定位置(方法监听方式)
// 开始拖拽功能...
var title = document.querySelector('.title');
title.addEventListener('mousedown', function (event) {
// 获取鼠标在盒子里的的位置(鼠标在页面中的位置-盒子相对页面的位置=鼠标在盒子中的位置
var x = event.pageX - login.offsetLeft;
var y = event.pageY - login.offsetTop;
document.addEventListener('mousemove', move);
function move(event) {
// 设置鼠标在页面里的位置
login.style.left = event.pageX - x + 'px';
login.style.top = event.pageY - y + 'px';
}
document.addEventListener('mouseup', function () {
document.removeEventListener('mousemove', move);
})
})
这句代码“var x = event.pageX - login.offsetLeft; ”的理解图如下:
(其他类似)
功能:鼠标按下移动小窗口,鼠标放开固定位置(传统方式)
title.onmousedown = function (event) {
var x = event.pageX - login.offsetLeft;
var y = event.pageY - login.offsetTop;
document.onmousemove = function (event) {
login.style.left = event.pageX - x + 'px';
login.style.top = event.pageY - y + 'px';
}
document.onmouseup = function () {
document.onmousemove = null;
}
}