本文介绍如何使用原生 JavaScript 实现一个轻量级的页面遮罩层组件。内容涵盖初始化配置、显示与关闭逻辑，以及处理浏览器兼容性和窗口大小变化的核心代码。通过封装常用工具函数，实现可复用的遮罩效果，适用于需要临时锁定页面交互的场景。
遮罩层效果与使用方法
首先展示实现效果。
接下来介绍具体使用方式。
初始化：Overlayer.Initialize({ZIndex:100,Backgrund:#666,Opacity:80});
显示遮罩层：直接调用 Overlayer.Show()；或在初始化时链式调用 .Show()，例如：Overlayer.Initialize({ZIndex:100,Backgrund:#666,Opacity:80}).Show();
关闭遮罩层：调用 Overlayer.Close() 方法即可隐藏。
公用函数实现
以下是完整的代码实现部分。
其中包含一些公用的辅助函数。
具体代码如下：
获取文档对象函数：
{
定义变量 obj。
判断文档兼容模式是否为 BackCompat。
{
如果是，则 obj 指向 document.body。
}
否则。
{
obj 指向 document.documentElement。
}
返回 obj。
}
获取页面尺寸函数：
{
调用 GetDocumentObject() 获取 obj。
//alert('pagesize:'+obj);
使用 with 语句操作 obj。
{
返回包含 width 和 height 的对象，width 取 scrollWidth 和 clientWidth 的较大值，height 取 scrollHeight 和 clientHeight 的较大值。
}
}
对象扩展函数：
{
遍历 source 中的每个 property。
{
将 source[property] 赋值给 destination[property]。
}
};
事件绑定函数：
{
从 arguments 中截取从索引2开始的参数作为 args。
返回一个函数，接收 event 参数。
{
调用 fun.apply(object, [event || window.event].concat(args)) 并返回结果。
}
} 遮罩层核心代码
以下是遮罩层的具体代码实现。
代码如下：
/*
遮罩层定义。
*/
定义 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)。
监听 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';
}
} 文章结束。
欢迎提出意见，谢谢。