遮罩 半透明123

Mask.js
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 = 0this._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"; });
    }
  }
};


test.html

<!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>
posted @ 2009-09-04 19:07  y0umer  阅读(230)  评论(0编辑  收藏  举报