廢話不多說，直接上代碼：

ps:依賴 jquer.js

1.首先，定義一個 Overlay.js?
代碼如下：

/*遮罩 Overlay js 對象*/
function Overlay(options){//{targetId:'',viewHtml:'',viewWidth:'',viewHeight:''}try{this.state=false;//遮罩狀態(tài)  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：

//創(chuàng)建一個遮罩對象 targetId:指的是被覆蓋的元素ID（必填）,<span style="font-family: Arial, Helvetica, sans-serif;">viewHtml：指遮罩啟用后顯示的框框的html內容（隨你寫，自由發(fā)揮,必填），</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可選），寬高可以根據(jù)自己需要調整</span>

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

4.跑一下應該問題就不大了，大概流程就這樣END;

總結

以上是生活随笔為你收集整理的遮罩，在指定元素上进行遮罩的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。