1.先上效果图：
2.使用方法：
初始化：overlayer.initialize({zindex:100,backgrund:#666,opacity:80});
显示：overlayer.show();或overlayer.initialize({zindex:100,backgrund:#666,opacity:80}).show();
关闭：overlayer.close();
3.代码如下：
公用函数：
复制代码 代码如下:
function getdocumentobject()
{
var obj;
if(document.compatmode=='backcompat')
{
obj=document.body;
}
else
{
obj=document.documentelement
}
return obj;
}
function getpagesize()
{
var obj = getdocumentobject();
//alert('pagesize:'+obj);
with(obj)
{
return {width:((scrollwidth>clientwidth)?scrollwidth:clientwidth),height:( (scrollheight>clientheight)?scrollheight:clientheight)}
}
}
var extend = function(destination, source)
{
for (var property in source)
{
destination[property] = source[property];
}
};
var bindaseventlistener = function(object, fun)
{
var args = array.prototype.slice.call(arguments).slice(2);
return function(event)
{
return fun.apply(object, [event || window.event].concat(args));
}
}
遮照层代码：
复制代码 代码如下:
/*
遮照层
*/
var overlayer=
{
//遮照层id,这个是硬编码的
id:'__dskjoverlayer_by_kevin',
//z轴顺序
zindex:0,
//背景颜色
background:'#333',
//透明度
opacity:60,
//
obj:''
};
/*
初始化
*/
overlayer.initialize=function(o)
{
//创建html元素
this.create();
//扩展属性赋值
extend(this,o);
//设置样式
this.setstylecss();
//附加事件
addlistener(window,'resize',bindaseventlistener(this,this.resize));
addlistener(window,'scroll',bindaseventlistener(this,function()
{
this._pagesize=getpagesize();
if(this._pagesize.height!=this._height)
{
this.resize();
this._height=this._pagesize.height;
}
}));
return this;
}
/*
创建html元素
*/
overlayer.create=function()
{
//alert('create');
var obj=$(this.id);
if(!obj)
{
obj = document.createelement('div');
obj.id=this.id;
obj.style.display='none';
document.body.appendchild(obj);
}
this.obj=obj;
}
/*
设置样式
*/
overlayer.setstylecss=function()
{
with(this.obj.style)
{
position = 'absolute';
background = this.background;
left = '0px';
top = '0px';
this.resize();
zindex = this.zindex;
filter = 'alpha(opacity='+this.opacity+')';//ie逆境
opacity = this.opacity/100;//非ie
}
}
/*
窗口改变大小时重新设置宽度和高度
*/
overlayer.resize=function()
{
if(this.obj)
{
var size=getpagesize();
this.obj.style.width=size.width+'px';
this.obj.style.height=size.height+'px';
}
}
/*
显示层
*/
overlayer.show=function()
{
//alert('show'+overlayer.id);
if(this.obj)
{
this.obj.style.display='block';
this.resize();
}
}
/*
关闭层，采用隐藏层的方法实现
*/
overlayer.close=function()
{
var overlay=this.obj;
if(overlay)
{
overlay.style.display='none';
}
}
4.结束语
欢迎拍砖，谢谢。