`

自己写的div遮罩层,里面有个div可以随滚动条变化而自变化,兼容火狐,ie,charom等。

阅读更多
/**
	 * 协议
	 * @param {} obj
	 */
	function zcqyd_xieyiDiv(obj){
		$("#xieyiMengBan").appendTo("html");
		$("#xieyicontent").appendTo("html");
		var htmlH = $("html").height();//获取html的高度
		var htmlW=$("html").width();//获取html的宽度
		var windowH=$(window).height();//获取当前窗口的高度
		var windowW=$(window).width();//获取当前窗口的宽度
		var sH=$(window).scrollTop();//滚动条距离顶部的距离
		var xieyiW=$("#xieyicontent").width();//协议div的宽度
		var xieyiH=$("#xieyicontent").height();//协议div的高度
		var vTop=(windowH-xieyiH)/2+sH;//获取position的top
		var vLeft=(windowW-$("#xieyicontent").width())/2;//获取position的left
		$(window).resize(function(){
			//当窗口变化时候重新获取高度和宽度
			windowH=$(window).height();
			windowW=$(window).width();
			vTop=(windowH-xieyiH)/2+sH;
		});
		$(window).scroll(function(){
			sH=$(window).scrollTop();
			vTop=(windowH-xieyiH)/2+sH;
			$("#xieyicontent").css({position:"absolute",height:"450px",
width:"800px",top:vTop,bottom:vTop,left:vLeft,right:vLeft,zIndex:1001});
		});
		$("#xieyicontent").css({position:"absolute",height:"450px",width:"800px",
top:vTop,bottom:vTop,left:vLeft,right:vLeft,zIndex:1001}).show();
		$("#xieyiMengBan").css({height:htmlH,width:htmlW}).show();
		$("#zcqyd_xieyiP").scrollTop(0);//滚动条回到顶部
	}	

 其中里面的ui-widget-overlay是jqueryui的class.

<div class='ui-widget-overlay' id="xieyiMengBan" style="display:none;"></div>
    <div id="xieyicontent" style="display:none;background:#FFFFFF;width:800px;"></div>

 

  • 大小: 34.4 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics