<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>弹窗</title>
<style type=
"text/css"
>
#mask {
position: fixed;
left:0;
top:0;
width:100%;
height: 100%;
background-color: hsla(250,100%,50%,0.6);
display: none;
}
#popBox {
position: absolute;
background-color:
#fff;
width:200px;
height: 200px;
}
</style>
</head>
<body>
<button id=
"clickBtn"
>点击</button>
<div id=
"mask"
>
<div id=
"popBox"
></div>
</div>
<script type=
"text/javascript"
>
var
clickBtn = document.getElementById(
"clickBtn"
);
var
popBox = document.getElementById(
"popBox"
)
var
mask = document.getElementById(
"mask"
);
clickBtn.onclick =
function
() {
mask.style.display =
"block"
;
popBox.style.left = (document.documentElement.clientWidth - popBox.offsetWidth)/2 +
"px"
;
popBox.style.top = (document.documentElement.clientHeight - popBox.offsetHeight)/2 +
"px"
;
}
popBox.onclick =
function
(e) {
var
e = e || window.event;
e.cancelBubble =
true
;
}
mask.onclick =
function
() {
mask.style.display =
"none"
;
}
popBox.onmousedown =
function
(e) {
var
e = e || window.event;
var
pos = popBox.getBoundingClientRect();
var
oX = e.clientX - pos.left;
var
oY = e.clientY - pos.top;
document.onmousemove =
function
(e) {
var
e = e || window.event;
var
oLeft = e.clientX - oX;
var
oTop = e.clientY - oY;
popBox.style.left = oLeft +
"px"
;
popBox.style.top = oTop +
"px"
;
if
(oLeft<0) {
popBox.style.left = 0 +
"px"
;
};
if
(oLeft>document.documentElement.clientWidth - popBox.offsetWidth) {
popBox.style.left = document.documentElement.clientWidth - popBox.offsetWidth +
"px"
;
}
if
(oTop<0) {
popBox.style.top = 0 +
"px"
;
};
if
(oTop > document.documentElement.clientHeight - popBox.offsetHeight) {
popBox.style.top = document.documentElement.clientHeight - popBox.offsetHeight +
"px"
;
}
}
popBox.onmouseup =
function
() {
document.onmousemove =
null
;
}
}
</script>
</body>
</html>