<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出框</title>
<style type="text/css">
*{ margin:0; padding:0;}
#win{ width:500px;position:absolute; top:50%; left:50%; margin:0 0 0 -250px; display:none;}
.title{ height:30px; line-height:30px; background-color:#999; font-size:14px; padding-left:10px; cursor:move;}
.title span{ float:right; margin-right:10px; cursor:pointer;}
li{ list-style-type:none; line-height:30px;}
.content{ border:1px solid #999;}
</style>
<script type="text/javascript">
window.onload=function(){
var win=document.getElementById("win");
var btn=document.getElementById("btn");
var closeBtn=document.getElementById("close");
var handler=document.getElementById("h_title");
var drag=false;
var posX=posY=0;//posX和posY分别是鼠标拖动时相对于目标对象左上角的left值和top值
//显示弹窗
btn.onclick=function(){
win.style.display="block";
}
//关闭弹窗
closeBtn.onclick=function(){
win.style.display="none";
}
closeBtn.onmousedown=function(event){
(event||window.event).cancelBubble=true;//阻止事件冒泡
}
//鼠标按下时
handler.onmousedown=function(event){
drag=true;
var evt=event||window.event;
posX=evt.clientX-win.offsetLeft;
poxY=evt.clientY-win.offsetTop;
this.setCapture && this.setCapture();//当设置该属性时，即使你的鼠标已经移出文档窗口，仍然可以监视相应的操作
return false;
}
//鼠标移动
document.onmousemove=function(evt){
if(!drag) return;
var evt=window.event||evt;
//鼠标能拖动的最大横向位移
var maxL=document.documentElement.clientWidth-win.offsetWidth;
//鼠标能拖动的最大纵向位移
var maxT=document.documentElement.clientHeight-win.offsetHeight;
var left=evt.clientX-posX;//计算拖动对象的left
var top=evt.clientY-posY;//计算拖动对象的top
left=left<0?0:left;//限制拖动范围只能在可视窗口内拖动此处是能拖动到最左端的位置
left=left>maxL?maxL:left;//限制拖动范围只能在可视窗口内拖动此处是能拖动到最右端的位置
top=top<0?0:top;//限制拖动范围只能在可视窗口内拖动此处是能拖动到最上端的位置
top=top>maxT?maxT:top;//限制拖动范围只能在可视窗口内拖动此处是能拖动到最下端的位置
win.style.marginLeft=0;//在样式中设置了margin-left的值，此处将它重置
win.style.top=top+"px";
win.style.left=left+"px";
return false;
}
//当鼠标释放，文档失去焦点，或者拖动松开时，停止拖动
document.onmouseup=window.onblur = handler.onlosecapture=function(){
drag=false;
handler.releaseCapture && handler.releaseCapture();
}
}
</script>
</head>
<body>
<input type="button" id="btn" value="弹出窗口"/>
<div id="win">
<h2 class="title" id="h_title"><span id="close">×</span>课程展示</h2>
<div class="content">
<ul>
<li><a title="内容">内容1</a></li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号