【可移动的】模拟弹窗div层

HTML:

	<div id="showZYList_TB" class="planzInfoPanel">
		<!--标题div层-->
		<div>
			<div style="float:left;">专业列表</div>
			<div style="float:right;"><img id="colsePanel_TB" class="close_tool"/></div>
		</div>
		<div style="margin:5px;background-color:#E0EEEE;max-height:300px;overflow-x:hidden;overflow-y:auto;">
			<!--数据展示table-->
			<table id="zyInfo" >
			</table>
		</div>
	</div>

CSS:

.planzInfoPanel{
	display: none;
	overflow: hidden;
	width: 600px;
	position: absolute;
	z-index: 1;
	border: 1px solid red;
	background-color: #ffffff;
}
/*弹出面板的关闭按钮*/
.close_tool{
	width: 16px;
	height: 16px;
	cursor: pointer;
	background: url('images/panel_close.gif') no-repeat; //自定义"关闭按钮"图片
	border: 0;
}

JS:

   //移动
		 $('#showZYList_TB').mousedown(function (event) { 
			 var isMove = true; 
			 var abs_x = event.pageX - $('div.planzInfoPanel').offset().left; 
			 var abs_y = event.pageY - $('div.planzInfoPanel').offset().top; 
			 $(document).mousemove(function (event) { 
				 if (isMove) { 
					 var obj = $('div.planzInfoPanel'); 
					 obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y}); 
				 } 
			 }).mouseup(function(){ 
					 isMove = false; 
			 }); 
		 });
   //显示	
	         showDiv($('#showZYList_TB'));
   //关闭
		  $('#colsePanel_TB').click(function(){
			  $('#showZYList_TB').css('display','none');
		  });

公用JS:

//在屏幕中央显示指定的Div
function showDiv(div){
	var dom = $('body');
	var top = $(window).height() - div.outerHeight(true);
	top = top / 2;
	if(top > 100){
		top = 100;
	}else if( top < 0){
		top = 0;
	}
	top = top + dom.scrollTop();
	var left = $(window).width() - div.outerWidth(true);
	left = left / 2;
	if(left < 0){
		left = 0;
	}
	left = left + dom.scrollLeft();
	div.css('top',top);
	div.css('left',left);
	div.show();
}