【可移动的】模拟弹窗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();
}

更多相关文章

随机推荐