JS masking layer implements code _javascript skill

1. The first effect chart:

2. How to use:
Initialization: Overlayer.initialize ({zindex:100,backgrund: #666, opacity:80});
Display: Overlayer.show () or Overlayer.initialize ({zindex:100,backgrund: #666, opacity:80}). Show ();
Close: Overlayer.close ();
3. The code is as follows:
Common functions:

Copy Code code as follows:

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));
}
}

Masking Layer Code:

Copy Code code as follows:

/*
Masking layer
*/
var overlayer=
{
Matte Layer ID, this is hard-coded
ID: ' __dskjoverlayer_by_kevin ',
Z-Axis Order
zindex:0,
Background color
Background: ' #333 ',
Transparency
Opacity:60,
//
OBJ: '
};
/*
Class
*/
Overlayer.initialize=function (o)
{
Creating HTML Elements
This. Create ();
Extended attribute Assignment
Extend (This,o);
Set style
This. Setstylecss ();
Attached events
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;
}
/*
Creating HTML Elements
*/
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;
}
/*
Set style
*/
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 adversity
Opacity = this. opacity/100;//Non IE
}
}
/*
Reset width and Height when window changes size
*/
Overlayer.resize=function ()
{
if (this. OBJ)
{
var size=getpagesize ();
This. obj.style.width=size.width+ ' px ';
This. obj.style.height=size.height+ ' px ';
}
}
/*
Display Layer
*/
Overlayer.show=function ()
{
Alert (' Show ' +overlayer.id);
if (this. OBJ)
{
This. obj.style.display= ' block ';
This. Resize ();
}
}
/*
Closed layer, using hidden layer method to achieve
*/
Overlayer.close=function ()
{
var overlay=this. OBJ;
if (overlay)
{
Overlay.style.display= ' None ';
}
}

4. Concluding remarks
Welcome to the brick, thank you.