js弹出幕布遮罩层
简单的css,可以根据要求自定义内容区域大小:
#customPop{position:fixed;_position:absolute; display:none; left:0; top:0; z-index:2000;} #customOpacity{ position:absolute; opacity:0.3;filter:Alpha(Opacity=30); z-index:2001; left:0; top:0; width:800px; height:800px;background:#000;} #customMain{ position:relative;z-index:2002; width:925px; height:525px; background:#fff; margin:0 auto;}
DOM结果:
<div id="customPop"> <div id="customOpacity"></div> <div id="customMain"> 这里放入弹出出的内容。(这是我给oohdear钻石礼物网准备开发的定制功能,名称暂时就不改了,需要的朋友自行更改即可)。 </div> </div>
JS,基于JQ:
function Custom_popUp(btn,popDiv){ this.btn=btn;//保存要执行单击的按钮 this.popDiv=popDiv;//保存弹出层 this.popMask=$("#customOpacity",this.popDiv);//保存弹出层的遮罩 this.popCentent=$("#customMain",this.popDiv);//保存弹出层内容编辑局域 var _this_=this; this.btn.click(function(){ _this_.pop();//执行pop函数 $(window).resize(function(){//绑定窗口调整大小事件,当元素处于隐藏状态时候,不执行pop函数 if(!_this_.popDiv.is(":hidden")){ _this_.pop(); } }); //兼容ie6 if(/msie 6.0/gi.test(window.navigator.userAgent)){ //ie6中如果按钮所在位置出现滚动条,则设置滚动条位置值到popDiv的top值上 var scrollTop=document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop; _this_.popDiv.css("top",scrollTop+"px"); $(window).scroll(function(){ var scrollTop=document.documentElement.scrollTop; _this_.popDiv.css("top",scrollTop+"px"); }); }; }); this.popDiv.click(function(){//当在幕布上点击的时候隐藏幕布 $(this).hide(); }); this.popCentent.click(function(e){//阻止事件冒泡 e.stopPropagation(); }); }; Custom_popUp.prototype={ pop:function(){ this.windowSize={w:document.documentElement.clientWidth,h:document.documentElement.clientHeight};//初始化窗口大小 this.popCentent.css("top",(this.windowSize.h-this.popCentent.height())/2+"px"); this.popMask.add(this.popDiv).css({ width:this.windowSize.w+"px", height:this.windowSize.h+"px" }); this.popDiv.show(); } };
调用:
new Custom_popUp($("#custom"),$("#customPop"));
版权声明:本文为yangliulang原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。