废话不多说,直接上代码:
4.跑一下应该问题就不大了,大概流程就这样END;
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);}
//创建一个遮罩对象 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;