jquery 创建遮盖层 示例代码

转载 2015年07月11日 11:00:38
    <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>


 

easyui为页面加载添加遮罩层

前面一直在讲EasyUI的用法,我也是最近在用这个东西,觉得这个组件里面还是有很多问题,很多的不足。比如,如果你加载一个带有弹出框的表格页面,如果加载速度很慢的话会出现下面的效果:     ...
  • majian_1987
  • majian_1987
  • 2013年01月23日 16:46
  • 14277

AJAX--显示加载中并弹出图层遮挡页面

众所周知,AJAX的请求是异步的,这种异步的机制给我们带来了体验上的优化,但是同时我要求我们有更完善的思维去处理一个业务。 当用户发出AJAX请求时,如果长时间处于请求阶段,而没有给出用...
  • Melody_Susan
  • Melody_Susan
  • 2015年09月17日 22:53
  • 2600

jQuery BlockUI 插件(遮罩层)

部分效果 概述 当使用AJAX时,jQuery BlockUI插件可以模拟同步行为,并且不会锁定浏览器。一旦被激活,它便会防止页面上(或页面的一部分)用户的操作,直到被停用。BlockUI给DOM...
  • evangel_z
  • evangel_z
  • 2016年04月11日 19:10
  • 1939

jquery $.ajax验证用户名是否存在示例代码

jquery $.ajax验证用户名是否存在示例代码   AjaxXMLServer的Servlet代码如下: package com.web; import java.io....
  • chenzhao12
  • chenzhao12
  • 2012年11月01日 21:23
  • 375

Jquery选择卡示例代码

jQuery选项卡               *{ margin:0; padding:0;}     body{ font-size:12px;}     ul,li{ list-sty...
  • xiangsuixinsheng
  • xiangsuixinsheng
  • 2011年09月18日 17:57
  • 829

jQuery中读取json文件示例代码

1.首先建一个JSON格式的文件userinfo.json 保存用户信息。如下: [ { "name":"张国立", "sex":"男", "...
  • HandsomClass
  • HandsomClass
  • 2015年10月27日 14:26
  • 335

jquery动态加载select下拉框示例代码

动态加载select下拉框的实现方法有很多,在接下来的文章中为大家介绍下jquery是如何实现的 如题,直接上代码,实战学习。  代码如下: jquery实现动态加载select下拉选项 ...
  • XiaoXuanYunMeng
  • XiaoXuanYunMeng
  • 2013年12月11日 15:34
  • 814

jquery $.ajax验证用户名是否存在示例代码

功能绝对实现了的.兼容IE6、IE7、FF、ChromeAjaxXMLServer的Servlet代码如下:package com.web;import java.io.IOException;imp...
  • xiangsuixinsheng
  • xiangsuixinsheng
  • 2011年07月09日 17:52
  • 5912

【示例代码】3D旋转图片立体展示jquery幻灯片插件(附源码)

此Jquery插件实现了3D旋转图片立体展示幻灯片插件,功能非常酷。有兴趣的同学可以试着做一下。   包括了以下功能:   1、可支持鼠标滚轮控制图片360度旋转   2、鼠标支持左右方向控制按...
  • cmcc_ude
  • cmcc_ude
  • 2013年05月15日 14:03
  • 1085

jQuery调用WCF示例代码

不废话了,直奔主题吧 wcf端: 近几年比较流行restful,为了能让ajax调用,同时也为了支持restful风格的uri,在创建一个Ajax-enabled Wcf Service后...
  • hefeng_aspnet
  • hefeng_aspnet
  • 2013年09月11日 14:06
  • 525
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery 创建遮盖层 示例代码
举报原因:
原因补充:

(最多只允许输入30个字)