【可移动的】模拟弹窗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:

//在屏幕中央显示指定的Divfunction 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();}