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({
                            this.windowSize.w+"px",
                            height:this.windowSize.h+"px"
                            });
            this.popDiv.show();
        }
    };

调用:

new Custom_popUp($("#custom"),$("#customPop"));