Simple Mask Layer

Effect:

Download:/files/jaylong/concealer .rar

1. source code of the heml page:

<SCRIPT type = "text/JavaScript" src = "jquery-1.4.1.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "noname3.js"> </SCRIPT>
<LINK rel = "stylesheet" type = "text/CSS" href = "noname2.css">

<Div id = "con"> <span id = "click"> <a href = "#"> click me </a> </span> </div>
<Div id = "shade"> I am the pop-up Mask Layer
<Div id = "closebtn"> close </div>
</Div>

2.css File

 

# Con
{
Margin : 200px ;
}
# Shade
{
Display : None ;
Position : Absolute ; /* Set to absolute location */
Width : 400px ;
Height : 200px ;
Border : # Bfe5b3 solid 1px ;
Z-Index : 200 ; /* Set Cascade */
Background : # Fff ;
}
/* ** Mask layer *** */
# Greybackground
{
Background : #000 ;
Display : Block ;
Z-Index : 100 ;
Width : 100% ;
Position : Absolute ;
Top : 0 ;
Left : 0 ;
}
# Closebtn
{
Position : Absolute ;
Top : 10px ;
Left : 340px ;
}

 

3. jsCode

 

$ ( Function (){
VaR Screenwidth, screenheight, mytop, getposleft, getpostop
Screenwidth = $ (Window). Width ();
Screenheight = $ (Window). Height ();
// Obtains the offset of the scroll bar from the top.
Mytop = $ (Document). scrolltop ();
// Calculate the left of the pop-up layer
Getposleft = Screenwidth /   2   -   200 ;
// Calculate the top of the pop-up layer
Getpostop = Screenheight /   2   -   150 ;
// CSS position pop-up layer
$ ( " # Shade " ).Css ({ " Left " : Getposleft, " Top " : Getpostop });
// When the browser window size changes
$ (Window). Resize ( Function (){
Screenwidth = $ (Window). Width ();
Screenheight = $ (Window). Height ();
Mytop = $ (Document). scrolltop ();
Getposleft = Screenwidth /   2   -   200 ;
Getpostop = Screenheight /   2   -   150 ;
$ ( " # Shade " ).Css ({ " Left " : Getposleft, " Top " : Getpostop + Mytop });
});
// When the scroll bar is pulled, the pop-up layer moves
$ (Window). Scroll ( Function (){
Screenwidth = $ (Window). Width ();
Screenheight = $ (Window). Height ();
Mytop = $ (Document). scrolltop ();
Getposleft = Screenwidth /   2   -   200 ;
Getpostop = Screenheight /   2   -   100 ;
$ ( " # Shade " ).Css ({ " Left " : Getposleft, " Top " : Getpostop + Mytop });
});
// Click the link to bring up the logon window.
$ ( " # Click " ). Click ( Function (){
$ ( " # Shade " ). Fadein ( " Slow " ); // Toggle ("slow ");
// Retrieve the document height on the page
VaR Docheight = $ (Document). Height ();
// Append a layer to make the background gray
$ ( " Body " ). Append ( " <Div id = 'greybackground '> </div> " );
$ ( " # Greybackground " ).Css ({ " Opacity " : " 0.5 " , " Height " : Docheight });
Return   False ;
});
// Click Close.
$ ( " # Closebtn " ). Click ( Function (){
$ ( " # Shade " ). Fadeout ( " Slow " ); // // Hide ();
// Delete the dimmed Layer
$ ( " # Greybackground " ). Remove ();
Return   False ;
});
});