遮罩层 滑动弹出框

 

 

    做弹出cent的时候<a  onclick="showDia()"></a>这样每次点击的时候页面滚动条会滚动到最上层,加入代码  href="javascript:void(0)"

 

 

 
<!--遮罩层-->  
<div id="floatBoxBg" style="display:none;filter:alpha(opacity=30);opacity:0.3;"></div>  
   
   
//isShow  show 显示  hide 隐藏  dioId显示对话框的id  
function showDia( isShow  ,dioId ){  
   
  var pos = getShowPos(dioId );   
   
  if(isShow=='show'){    
	// alert(pos.y );  
	// $('#basicInfo').animate({top:1713,opacity: 'show' } ,'fast');  
    createZheZhao();  
      
	$("#basicInfo").animate({ top: pos.y , opacity: 'show' }, 'slow');  
  }else{  
	  $('#basicInfo').hide( );  
	  $('#floatBoxBg').hide( );  
  }    
}  
   
   //遮罩层  
  function createZheZhao(){  
	// var temp_float="<div id=\"floatBoxBg\" style=\"height:"+$(document).height()+"px;\"></div>";  
	$('#floatBoxBg').css({height:$(document).height()});  
	$('#floatBoxBg').show();  
	// $("body").append(temp_float);  
  }  
   
   
 //得到对话框 显示位置  
function getShowPos(id ){  
	var point = {};  
	var scrol = getScroll();  
	var objH=$("#"+id).height();//浮动对象的高度   
	var objW=$("#"+id).width();//浮动对象的宽度   
	   
	var objT=Number(scrol.top)+(screen.height-Number(objH))/2;   
	var objL=Number(scrol.left)+(screen.width-Number(objW))/2;   
	   
	point.x =objL ;   
	point.y =objT ;   
	   
	return point;   
   
}  
   
//得到滚动条位置  
function getScroll() {  
    var t, l ;  
    if (document.documentElement && document.documentElement.scrollTop) {  
        t = document.documentElement.scrollTop;  
        l = document.documentElement.scrollLeft;  
    } else if (document.body) {  
        t = document.body.scrollTop;  
        l = document.body.scrollLeft;  
    }  
   
    return { top: t, left: l  };  
}  
   
   
-----------------------------------------------------------------------------------------------  
   
弹出框的样式  
style="display:none;z-index:9999;position:absolute ;left:309px;top:199px"  
   
   
 <!-- 页面  透明背景层    -->  
<div id="transId" style="display:none;filter:alpha(opacity=30);opacity:0.3;background-color:black"></div>  
 
/** 
 *  显示   浮动层   
 * transId 透明层的div的id         floatBoxBgId 浮动层的id 
 */  
function showFloatDiv( transId, floatBoxBgId ){  

	 $('#'+transId).css({height:$(document).height()+"px"});  
	 $('#'+transId).show();  
	 var newTop = ($(document).scrollTop()+200)+"px";  
	 $('#'+floatBoxBgId).animate({top:newTop ,opacity:"show"}, { duration: 400 });  
}