首页 > 代码库 > 遮罩,在指定元素上进行遮罩
遮罩,在指定元素上进行遮罩
废话不多说,直接上代码:
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;
遮罩,在指定元素上进行遮罩
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。