遮罩，在指定元素上进行遮罩

废话不多说，直接上代码：

ps:依赖 jquer.js

1.首先，定义一个 Overlay.js 
代码如下：

/*遮罩 Overlay js 对象*/
function Overlay(options){//{targetId:'',viewHtml:'',viewWidth:'',viewHeight:''}
	try{
		this.state=false;//遮罩状态  true 激活，false 没有激活
		this.bgElementId='overlay_bg';
		this.bgElement=document.createElement('DIV');
		$(this.bgElement).attr('id',this.bgElementId);
		
		this.viewHtml=options['viewHtml'];
		this.viewPanel=document.createElement('DIV');
		
		this.viewWidth=options['viewWidth']|320;
		this.viewHeight=options['viewHeight']|25;
		$(this.viewPanel).css({'background-color':'#FFFFFF','border':'1px solid #237AD3','display':'none','width':this.viewWidth+'px','height':this.viewHeight+'px','z-index':'1002','position':'absolute','top':'0','right':'0'});//先隐藏
		$(this.viewPanel).append(this.viewHtml);
		
		
		this.targetId	=options['targetId'];
		this.targetElement=$('#'+this.targetId);
		
		$(this.bgElement).css({'display':'none'});//先隐藏
		$(this.bgElement).attr('class','bgOverlay');
		$(this.targetElement).css({'position':'relative'});//覆盖目标position设置为relative，便于覆盖物相对定位
		$(this.targetElement).append(this.bgElement);
		$(document.body).append(this.viewPanel);
	
	}catch(e){alert('Overlay，初始化失败！');}
	
}

Overlay.prototype.show=function (obj) { 
			var that = this;
            $(that.bgElement).css({'display':'block'});
            //设置覆盖物的高度与覆盖目标保证一直（IE6下需要这样做方能撑开覆盖物）
            $(that.bgElement).css({'height':$(that.targetElement).height()+'px'});
            //获取鼠标点击坐标显示 可视面板
            var vp = $(obj).offset();
            var bgW = $(this.bgElement).width();
            var bgP = $(this.bgElement).offset();
            	vp.top=vp.top-that.viewHeight-2;//调整位置
            //暂时只对左边界作调整处理
            var isLeftOverstep=false;
            	while((vp.left+that.viewWidth)>(bgP.left+bgW)){
            		isLeftOverstep=true;
            		vp.left--;
            	}
            	if(isLeftOverstep){//如果越界并调整后，再调整5个像素，不至于挤在边上
            		vp.left-=5;
            	}
            	
            	$(this.viewPanel).css({'top':vp.top+'px','left':vp.left+'px','display':'block'});
            that.state=true;//激活遮罩
}
Overlay.prototype.hide=function () {
			var that = this;
	   		$(that.bgElement).css({'display':'none'});
            $(that.viewPanel).css({'display':'none'});
            that.state=true;//激活遮罩.state=false;//没有激活遮罩
}

2.页面引入下面的 overlay.css文件

代码如下：

/*遮罩样式\*/
.bgOverlay{ display: none;  position: absolute;  top: 0%;  left: 0%;  width: 100%;  height: 100%;  background-color: #C4C4C4;  z-index:1001;  -moz-opacity: 0.6;  opacity:.60;  filter: alpha(opacity=60);}

3.eg：

//创建一个遮罩对象 targetId:指的是被覆盖的元素ID（必填）,<span style="font-family: Arial, Helvetica, sans-serif;">viewHtml：指遮罩启用后显示的框框的html内容（随你写，自由发挥,必填），</span><span style="font-family: Arial, Helvetica, sans-serif;">viewWidth:框框的宽度（默认320</span><span style="font-family: Arial, Helvetica, sans-serif;">可选</span><span style="font-family: Arial, Helvetica, sans-serif;">），viewHeight:'框框的高度（默认25可选），宽高可以根据自己需要调整</span>

var overlay=new Overlay({targetId:'dataListDiv',viewHtml:'测试'});

4.跑一下应该问题就不大了，大概流程就这样END;