<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示/隐藏&&拖拽</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
#box{
position: relative;
}
input{
cursor: pointer;
}
#inner{
width: 100%;
height: 900px;
background-color: rgba(0,0,0,0.2);
position: absolute;
left: 0;
top: 0;
z-index: 1;
display: none;
}
span{
width: 200px;
height: 200px;
display: block;
background-color: #fff;
position: absolute;
left: 200px;
top: 200px;
cursor: move;//将鼠标改为十字架
}
a{
display: inline-block;
position: absolute;
right: 0;
top: 0;
font-size: 15px;
color: pink;
text-decoration: none;
}
</style>
<body>
<div id="box">
<input type="button" value="显示/隐藏">
<div id="inner">
<span>
<a href="###">X</a>
</span>
</div>
</div>
<script>
var inputs=document.getElementsByTagName("input")[0];
var inner=document.getElementById("inner");
var spans=inner.getElementsByTagName("span")[0];
var as=inner.getElementsByTagName("a")[0];
// 鼠标点击事件
inputs.onclick=function(){
inner.style.display="block";
}
as.onclick=function(){
inner.style.display="none";
}
// 鼠标拖拽，内容不离开可视区
spans.onmousedown=function(e){
var ev=e||window.event;//兼容浏览器
var l=ev.clientX-spans.offsetLeft;// 鼠标到内容即spans左边的距离(鼠标每点一次以后固定值)
var t=ev.clientY-spans.offsetTop; // 鼠标到内容即spans上边的距离(鼠标每点一次以后固定值)
// console.log(l)
// console.log(spans.offsetLeft)
spans.onmousemove=function(e){
var ev=e||window.event;
var nl=ev.clientX-l;// 内容即spans到浏览器左边的距离（随鼠标的改变距离改变——不定）
var nt=ev.clientY-t;// 内容即spans到浏览器上边的距离（随鼠标的改变距离改变——不定）
// 使内容即spans不离开可视区
// 左右
if(nl<0){
nl=0;
}else if(nl>document.documentElement.clientWidth-spans.offsetWidth){
// document.documentElement.clientWidth——表示浏览器可视区的宽度（不包括边线）
nl=document.documentElement.clientWidth-spans.offsetWidth;
// console.log(document.documentElement.clientWidth)
}
// 上下
if(nt<0){
nt=0;
}else if(nt>document.documentElement.clientHeight-spans.offsetHeight){
// document.documentElement.clientHeight——表示浏览器可视区的高度（不包括边线）
nt=document.documentElement.clientHeight-spans.offsetHeight;
// console.log(document.documentElement.clientHeight)
}
spans.style.left=nl+‘px‘;// 内容即spans到浏览器左边的距离+单位——为内容即span距离浏览器左边的距离
spans.style.top=nt+‘px‘;// 内容即spans到浏览器上边的距离+单位——为内容即span距离浏览器上边的距离
// console.log(nl)
}
spans.onmouseup=function(){
spans.onmousemove=null;
}
}
</script>
</body>
</html>