案例：模态框拖拽
功能需求：
点出弹出层，会弹出模块框，并且显示灰色半透明的遮挡层点击关闭按钮，可以关闭模态框，同时关闭灰色半透明遮挡层鼠标放到模态框最上面一层，可以按住鼠标拖拽模块框在页面中移动鼠标松开，可以停止拖动模态框移动
思路：
点击弹出层，模态框和遮挡层就会显示出来 display : block点击关闭按钮，模态框和遮挡层就会隐藏起来 display : none在页面中拖拽的原理：鼠标按下并移动，之后松开鼠标触发事件是鼠标按下mousedown 鼠标移动mouseover 鼠标松开mouseup拖拽过程：鼠标移动过程中，获得最新的值赋值给模态框的left 和top 值，这样模态框就可以跟着鼠标走了鼠标按下触发的事件源是 最上面的一行 就是id 为 title
<style
>
* {
padding
: 0;
margin
: 0;
}
.login
-header
{
margin
: auto 500px
;
font
-weight
: 700;
font
-size
: 18px
;
}
.login
{
display
: none
;
width
: 512px
;
height
: 280px
;
position
: fixed
;
border
: #ebebeb solid
1px
;
left
: 50%;
top
: 50%;
background
: #fff
;
box
-shadow
: 0px
0px
20px #ddd
;
z
-index
: 9999;
transform
: translate(-50%, -50%);
}
.login
-title
{
width
: 100%;
margin
: 10px
0px
0px
0px
;
text
-align
: center
;
line
-height
: 40px
;
height
: 40px
;
font
-style
: 18px
;
position
: relative
;
cursor
: move
;
}
.login
-input
-content
{
margin
-top
: 20px
;
}
.login
-button
{
width
: 50%;
margin
: 30px
auto 0px
auto;
line
-height
: 40px
;
border
: #ebebeb
1px solid
;
text
-align
: center
;
}
.login
-bg
{
display
: none
;
width
: 100%;
height
: 100%;
position
: fixed
;
top
: 0px
;
left
: 0px
;
background
: rgba(0, 0, 0, 0.3);
}
a
{
text
-decoration
: none
;
color
: #
000000;
}
.login
-button a
{
display
: block
;
}
.login
-input input
.list
-input
{
float: left
;
line
-height
: 35px
;
height
: 35px
;
width
: 350px
;
border
: #ebebeb
1px solid
;
text
-indent
: 5px
;
}
.login
-input
{
overflow
: hidden
;
margin
: 0px
0px
20px
0px
;
}
.login
-input label
{
float: left
;
width
: 90px
;
padding
-right
: 100px
;
text
-align
: right
;
line
-height
: 35px
;
height
: 35px
;
font
-style
: 14px
;
}
.login
-title span
{
position
: absolute
;
font
-style
: 12px
;
right
: -20px
;
top
: -30px
;
background
: #fff
;
border
: #ebebeb solid
1px
;
width
: 40px
;
height
: 40px
;
border
-radius
: 20px
;
}
</style
>
</head
>
<body
>
<div class
="login-header">
<a id
="link" href
="javascript:;">点击，弹出登录框
</a
>
</div
>
<div id
="login" class
="login">
<div id
="title" class
="login-title">
登录会员
<span
><a id
="closeBtn" href
="javascript:void(0);" class
="close-login"
>关闭
</a
></span
>
</div
>
<div class
="login-input-content">
<div class
="login-input">
<label
>用户名
:</label
>
<input
type
="text"
placeholder
="请输入用户名"
name
="info[username]"
id
="username"
class
="username"
/>
</div
>
<div class
="login-input">
<label
>登录密码
:</label
>
<input
type
="password"
placeholder
="请输入密码"
name
="info[password]"
id
="password"
class
="password"
/>
</div
>
</div
>
<div id
="loginBtn" class
="login-button">
<a href
="javascript:void(0);" id
="login-button-submit"></a
>
</div
>
</div
>
<!-- 遮挡层
-->
<div id
="bg" class
="login-bg"></div
>
<script
>
var login
= document
.querySelector(".login");
var mask
= document
.querySelector(".login-bg");
var link
= document
.querySelector("#link");
var closeBtn
= document
.querySelector("#closeBtn");
var title
= document
.querySelector("#title");
link
.addEventListener("click", function
() {
mask
.style
.display
= "block";
login
.style
.display
= "block";
});
closeBtn
.addEventListener("click", function
() {
mask
.style
.display
= "none";
login
.style
.display
= "none";
});
title
.addEventListener("mousedown", function
(e
) {
var x
= e
.pageX
- login
.offsetLeft
;
var y
= e
.pageY
- login
.offsetTop
;
document
.addEventListener("mouseover", 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
>
