遮罩 半透明123

var isIE  =  (document.all)  ?   true  :  false ;

var isIE6  =  isIE  &&  ([ / MSIE (/d)/. 0 / i.exec(navigator.userAgent)][ 0 ][ 1 ]  ==   6 );

var $  =  function (id) {
     return   " string "   ==   typeof  id  ?  document.getElementById(id) : id;
};

var Class  =  {
    create: function() {
         return  function() {  this .initialize.apply( this , arguments); }
    }
}

var Extend  =  function(destination, source) {
     for  (var property  in  source) {
        destination[property]  =  source[property];
    }
}

var Bind  =  function( object , fun) {
     return  function() {
         return  fun.apply( object , arguments);
    }
}

var Each  =  function(list, fun){
     for  (var i  =   0 , len  =  list.length; i  <  len; i ++ ) { fun(list[i], i); }
};

var Contains  =  function(a, b){
     return  a.contains  ?  a  !=  b  &&  a.contains(b) :  !! (a.compareDocumentPosition(b)  &   16 );
}


var OverLay  =  Class.create();
OverLay.prototype  =  {
  initialize: function(options) {

     this .SetOptions(options);
    
     this .Lay  =  $( this .options.Lay)  ||  document.body.insertBefore(document.createElement( " div " ), document.body.childNodes[ 0 ]);
    
     this .Color  =   this .options.Color;
     this .Opacity  =  parseInt( this .options.Opacity);
     this .zIndex  =  parseInt( this .options.zIndex);
    
    with( this .Lay.style){ display  =   " none " ; zIndex  =   this .zIndex; left  =  top  =   0 ; position  =   " fixed " ; width  =  height  =   " 100% " ; }
    
     if (isIE6){
         this .Lay.style.position  =   " absolute " ;
         // ie6设置覆盖层大小程序
         this ._resize  =  Bind( this , function(){
             this .Lay.style.width  =  Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth)  +   " px " ;
             this .Lay.style.height  =  Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight)  +   " px " ;
        });
         // 遮盖select
         this .Lay.innerHTML  =   ' <iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe> '
    }
  },
   // 设置默认属性
  SetOptions: function(options) {
     this .options  =  { // 默认值
        Lay:         null , // 覆盖层对象
        Color:         " #fff " , // 背景色
        Opacity:     50 , // 透明度(0-100)
        zIndex:         1000 // 层叠顺序
    };
    Extend( this .options, options  ||  {});
  },
   // 显示
  Show: function() {
     // 兼容ie6
     if (isIE6){  this ._resize(); window.attachEvent( " onresize " ,  this ._resize); }
     // 设置样式
    with( this .Lay.style){
         // 设置透明度
        isIE  ?  filter  =   " alpha(opacity: "   +   this .Opacity  +   " ) "  : opacity  =   this .Opacity  /   100 ;
        backgroundColor  =   this .Color; display  =   " block " ;
    }
  },
   // 关闭
  Close: function() {
     this .Lay.style.display  =   " none " ;
     if (isIE6){ window.detachEvent( " onresize " ,  this ._resize); }
  }
};



var LightBox  =  Class.create();
LightBox.prototype  =  {
  initialize: function(box, options) {
    
     this .Box  =  $(box); // 显示层
    
     this .OverLay  =   new  OverLay(options); // 覆盖层
    
     this .SetOptions(options);
    
     this .Fixed  =   !! this .options.Fixed;
     this .Over  =   !! this .options.Over;
     this .Center  =   !! this .options.Center;
     this .onShow  =   this .options.onShow;
    
     this .Box.style.zIndex  =   this .OverLay.zIndex  +   1 ;
     this .Box.style.display  =   " none " ;
    
     // 兼容ie6用的属性
     if (isIE6){
         this ._top  =   this ._left  =   0 ;  this ._select  =  [];
         this ._fixed  =  Bind( this , function(){  this .Center  ?   this .SetCenter() :  this .SetFixed(); });
    }
  },
   // 设置默认属性
  SetOptions: function(options) {
     this .options  =  { // 默认值
        Over:     true , // 是否显示覆盖层
        Fixed:     false , // 是否固定定位
        Center:     false , // 是否居中
        onShow:    function(){} // 显示时执行
    };
    Extend( this .options, options  ||  {});
  },
   // 兼容ie6的固定定位程序
  SetFixed: function(){
     this .Box.style.top  =  document.documentElement.scrollTop  -   this ._top  +   this .Box.offsetTop  +   " px " ;
     this .Box.style.left  =  document.documentElement.scrollLeft  -   this ._left  +   this .Box.offsetLeft  +   " px " ;
    
     this ._top  =  document.documentElement.scrollTop;  this ._left  =  document.documentElement.scrollLeft;
  },
   // 兼容ie6的居中定位程序
  SetCenter: function(){
     this .Box.style.marginTop  =  document.documentElement.scrollTop  -   this .Box.offsetHeight  /   2   +   " px " ;
     this .Box.style.marginLeft  =  document.documentElement.scrollLeft  -   this .Box.offsetWidth  /   2   +   " px " ;
  },
   // 显示
  Show: function(options) {
     // 固定定位
     this .Box.style.position  =   this .Fixed  &&   ! isIE6  ?   " fixed "  :  " absolute " ;

     // 覆盖层
     this .Over  &&   this .OverLay.Show();
    
     this .Box.style.display  =   " block " ;
    
     // 居中
     if ( this .Center){
         this .Box.style.top  =   this .Box.style.left  =   " 50% " ;
         // 设置margin
         if ( this .Fixed){
             this .Box.style.marginTop  =   -   this .Box.offsetHeight  /   2   +   " px " ;
             this .Box.style.marginLeft  =   -   this .Box.offsetWidth  /   2   +   " px " ;
        } else {
             this .SetCenter();
        }
    }
    
     // 兼容ie6
     if (isIE6){
         if ( ! this .Over){
             // 没有覆盖层ie6需要把不在Box上的select隐藏
             this ._select.length  =   0 ;
            Each(document.getElementsByTagName( " select " ), Bind( this , function(o){
                 if ( ! Contains( this .Box, o)){ o.style.visibility  =   " hidden " ;  this ._select.push(o); }
            }))
        }
         // 设置显示位置
         this .Center  ?   this .SetCenter() :  this .Fixed  &&   this .SetFixed();
         // 设置定位
         this .Fixed  &&  window.attachEvent( " onscroll " ,  this ._fixed);
    }
    
     this .onShow();
  },
   // 关闭
  Close: function() {
     this .Box.style.display  =   " none " ;
     this .OverLay.Close();
     if (isIE6){
        window.detachEvent( " onscroll " ,  this ._fixed);
        Each( this ._select, function(o){ o.style.visibility  =   " visible " ; });
    }
  }
};

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 "   />
< title ></ title >
< script src = " Mask.js "  type = " text/javascript " ></ script >  
< style >
    .lightbox{width:300px;height:500px;background:#FFFFFF;}
</ style >
</ head >
< body >

< div id = " idBox "   class = " lightbox " >
   < div id = " idBoxHead " >< b > LightBox </ b ></ div >
   < div >
    内容显示
     < input name = ""  type = " button "  value = "  关闭  "  id = " idBoxCancel "  onclick = " box.Close(); " />
   </ div >
</ div >

< div style = " margin:0 auto; width:900px; height:1000px; border:1px solid #000000; " >
< br  />< br  />< br  />< br  />< br  />< br  />< br  />< br  />< br  />< br  />< br  />< br  />< br  />< br  />< br  />< br  />< br  />< br  />< br  />< br  />< br  />< br  />< br  />< br  />< br  />< br  />
< select >
< option > 覆盖select测试 </ option >
</ select >  
< input name = ""  type = " button "  value = "  打开  "  id = " idBoxOpen "  onclick = " box.Show(); " />

</ div >
< script >

var box  =   new  LightBox( " idBox " );
box.Over  =   true ; // 显示遮罩层
box.OverLay.Color  =   " #000 " ; // 遮罩层颜色
box.OverLay.Opacity  =   50 ; // 遮罩透明度
box.Fixed  =   true ; // 定位
box.Center  =   true ; // 居中

</ script >
</ body >
</ html >