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

最新推荐文章于 2019-08-05 13:43:00 发布

kkrgwbj

最新推荐文章于 2019-08-05 13:43:00 发布

阅读量276

点赞数

分类专栏： html javascript 文章标签： html javascript ViewUI

本文链接：https://blog.csdn.net/kkrgwbj/article/details/84540111

版权

javascript 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

/**
	 * 协议
	 * @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>