关闭

jquery 创建遮盖层 示例代码

425人阅读 评论(0) 收藏 举报
分类:
    <style type="text/css">
	    /* 半透明的遮罩层 */
			#overlay {
		    background: #000;
		    filter: alpha(opacity=50); /* IE的透明度 */
		    opacity: 0.5;  /* 透明度 */
		    display: none;
		    position: absolute;
		    top: 0px;
		    left: 0px;
		    width: 100%;
		    height: 100%;
		    z-index: 100000; /* 此处的图层要大于页面 */
		    display:none;
		}
		
		</style>
    
 
 	<script type="text/javascript">
 	  
		 	/* 显示遮罩层 */
			function showOverlay() {
			    $("#overlay").height(pageHeight());
			    $("#overlay").width(pageWidth());
			
			    // fadeTo第一个参数为速度,第二个为透明度
			    // 多重方式控制透明度,保证兼容性,但也带来修改麻烦的问题
			    $("#overlay").fadeTo(200, 0.5); //遮盖层
			    
			    adjust("#checkcodediv");    
			    $("#checkcodediv").show();  //显示在遮盖层中间位置的弹窗层
			    
			}
			
			/* 隐藏覆盖层 */
			function hideOverlay1() {
			    $("#overlay").fadeOut(200);
			    $("#checkcodediv").hide();
			}
		 
			
			/* 当前页面高度 */
			function pageHeight() {
			    return document.body.scrollHeight;
			}
			
			/* 当前页面宽度 */
			function pageWidth() {
			    return document.body.scrollWidth;
			}
			
			/* 定位到页面中心 */
			function adjust(id) {
			    var w = $(id).width();
			    var h = $(id).height();
			    
			    var t = scrollY() + (windowHeight()/2) - (h/2);
			    if(t < 0) t = 0;
			    
			    var l = scrollX() + (windowWidth()/2) - (w/2);
			    if(l < 0) l = 0;
			    
			    $(id).css({left: l+'px', top: t+'px' , display:'block'}); 
			    
			  /*var winwid = window.inne rWidth || document.documentElement.clientWidth || document.body.clientWidth,
				winhei = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
				pWidTH = $( id ).width(),
				Pheight = $( id ).height();	
				$( id ).css({
					top   :  ( winhei - Pheight )/2,
					left  :  ( winwid - pWidTH )/2
				}); */
			    
			}
			
			//浏览器视口的高度
			function windowHeight() {
			    var de = document.documentElement;
			    return self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
			}
			
			//浏览器视口的宽度
			function windowWidth() {
			    var de = document.documentElement;
			    return self.innerWidth || (de && de.clientWidth) || document.body.clientWidth
			}
			
			/* 浏览器垂直滚动位置 */
			function scrollY() {
			    var de = document.documentElement;
			    return self.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
			}
			
			/* 浏览器水平滚动位置 */
			function scrollX() {
			    var de = document.documentElement;
			    return self.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;
			}
			
 	</script>


 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:196466次
    • 积分:2087
    • 等级:
    • 排名:千里之外
    • 原创:36篇
    • 转载:26篇
    • 译文:2篇
    • 评论:20条
    文章分类