Javascript-learning to make a Mask Layer

Dom-drag.js is as follows:

/*************************************** ***********
* Dom-drag.js
* 09.25.2001
* Www.youngpup.net
* Script featured on dynamic driving (http://www.dynamicdrive.com) 12.08.2005
**************************************** **********
* 10.28.2001-fixed minor bug where events
* Sometimes fired off the handle, not the root.
**************************************** **********/

VaR drag = {

OBJ: NULL,

Init: function (O, oroot, Minx, Maxx, miny, Maxy, bswaphorzref, bswapvertref, fxmapper, fymapper)
{
O. onmousedown = drag. Start;

O. hmode = bswaphorzref? False: true;
O. vmode = bswapvertref? False: true;

O. Root = oroot & oroot! = NULL? Oroot: O;

If (O. hmode & isnan (parseint (O. Root. style. Left) O. Root. style. Left = "0px ";
If (O. vmode & isnan (parseint (O. Root. style. Top) O. Root. style. Top = "0px ";
If (! O. hmode & isnan (parseint (O. Root. style. Right) O. Root. style. Right = "0px ";
If (! O. vmode & isnan (parseint (O. Root. style. Bottom) O. Root. style. Bottom = "0px ";

O. Minx = typeof minx! = 'Undefined '? Minx: NULL;
O. miny = typeof miny! = 'Undefined '? Miny: NULL;
O. Maxx = typeof Maxx! = 'Undefined '? Maxx: NULL;
O. Maxy = typeof Maxy! = 'Undefined '? Maxy: NULL;

O. xmapper = fxmapper? Fxmapper: NULL;
O. ymapper = fymapper? Fymapper: NULL;

O. Root. ondragstart = new function ();
O. Root. ondragend = new function ();
O. Root. ondrag = new function ();
},

Start: function (E)
{
VaR o = drag. OBJ = this;
E = drag. fixe (E );
Var y = parseint (O. vmode? O. Root. style. Top: O. Root. style. Bottom );
VaR x = parseint (O. hmode? O. Root. style. Left: O. Root. style. Right );
O. Root. ondragstart (x, y );

O. lastmousex = E. clientx;
O. lastmousey = E. clienty;

If (O. hmode ){
If (O. minx! = NULL) O. minmousex = E. clientx-x + O. Minx;
If (O. Maxx! = NULL) O. maxmousex = O. minmousex + O. Maxx-o. Minx;
} Else {
If (O. minx! = NULL) O. maxmousex =-o. Minx + E. clientx + X;
If (O. Maxx! = NULL) O. minmousex =-o. Maxx + E. clientx + X;
}

If (O. vmode ){
If (O. miny! = NULL) O. minmousey = E. clienty-y + O. miny;
If (O. Maxy! = NULL) O. maxmousey = O. minmousey + O. Maxy-o. miny;
} Else {
If (O. miny! = NULL) O. maxmousey =-o. miny + E. clienty + Y;
If (O. Maxy! = NULL) O. minmousey =-o. Maxy + E. clienty + Y;
}

Document. onmousemove = drag. Drag;
Document. onmouseup = drag. end;

Return false;
},

Drag: function (E)
{
E = drag. fixe (E );
VaR o = drag. OBJ;

VaR ey = E. clienty;
VaR EX = E. clientx;
Var y = parseint (O. vmode? O. Root. style. Top: O. Root. style. Bottom );
VaR x = parseint (O. hmode? O. Root. style. Left: O. Root. style. Right );
VaR NX, NY;

If (O. minx! = NULL) EX = O. hmode? Math. Max (ex, O. minmousex): Math. Min (ex, O. maxmousex );
If (O. Maxx! = NULL) EX = O. hmode? Math. Min (ex, O. maxmousex): Math. Max (ex, O. minmousex );
If (O. miny! = NULL) ey = O. vmode? Math. Max (ey, O. minmousey): Math. Min (ey, O. maxmousey );
If (O. Maxy! = NULL) ey = O. vmode? Math. Min (ey, O. maxmousey): Math. Max (ey, O. minmousey );

Nx = x + (ex-o. lastmousex) * (O. hmode? 1:-1 ));
NY = Y + (ey-o. lastmousey) * (O. vmode? 1:-1 ));

If (O. xmapper) Nx = O. xmapper (y)
Else if (O. ymapper) ny = O. ymapper (X)

Drag. obj. Root. Style [O. hmode? "Left": "right"] = NX + "PX ";
Drag. obj. Root. Style [O. vmode? "TOP": "bottom"] = ny + "PX ";
Drag. obj. lastmousex = ex;
Drag. obj. lastmousey = ey;

Drag. obj. Root. ondrag (NX, NY );
Return false;
},

End: function ()
{
Document. onmousemove = NULL;
Document. onmouseup = NULL;
Drag. obj. Root. ondragend (parseint (drag. obj. Root. Style [drag. obj. hmode? "Left": "right"]),
Parseint (drag. obj. Root. Style [drag. obj. vmode? "TOP": "bottom"]);
Drag. OBJ = NULL;
},

Fixe: function (E)
{
If (typeof E = 'undefined') E = Window. event;
If (typeof E. layerx = 'undefined') E. layerx = E. offsetx;
If (typeof E. layery = 'undefined') E. layery = E. offsety;
Return E;
}
};

 

 

The page code is as follows:

<! 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>
<Title> mask layer </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = GBK"/>
<Meta name = "designer" content = "cssrain"/>
<Meta name = "designer mail" content = "cssrain@gmail.com"/>
<Meta name = "keywords" content = "Mask Layer"/>
<Meta name = "Description" content = "Mask Layer"/>
<Style>
* {Padding: 0; margin: 0}/* this row style must be added. Otherwise, a bug may occur. */

# Mydiv {
Position: absolute;
Width: 200px;
Height: 200px;
Font-size: 12px;
Background: #666;
Border: 1px solid #000;
Z-index: 10001;
Display: none;
Text-align: center;
}
</Style>
<SCRIPT src = "dom-drag.js" type = "text/JavaScript"> </SCRIPT>
<Script language = "JavaScript">
// Create a Mask Layer
Function alertmsg (){

/** Step 1: Create a div mask layer. */
VaR swidth, sheight;
Swidth = Window. Screen. availwidth;
// Screen available workspace Height: window. Screen. availheight;
// Available screen workspace width: window. Screen. availwidth;
// Full text width of the webpage: Document. Body. scrollwidth;
// Webpage text height: Document. Body. scrollheight;
If (window. Screen. availheight> document. Body. scrollheight) {// when the height is less than one screen
Sheight = Window. Screen. availheight;
} Else {// when the height is greater than one screen
Sheight = Document. Body. scrollheight;
}
// Create a mask background
VaR maskobj = Document. createelement ("Div ");
Maskobj. setattribute ('id', 'bigdiv ');
Maskobj. style. Position = "absolute ";
Maskobj. style. Top = "0 ";
Maskobj. style. Left = "0 ";
Maskobj. style. Background = "#777 ";
Maskobj. style. Filter = "alpha (opacity = 30 );";
Maskobj. style. Opacity = "0.3 ";
Maskobj. style. width = swidth + "PX ";
Maskobj. style. Height = sheight + "PX ";
Maskobj. style. zindex = "10000 ";
Document. Body. appendchild (maskobj );

/** Step 2: dynamically set the top margin and left margin of the DIV to center the pop-up Div. */
VaR mydiv = Document. getelementbyid ("mydiv ");
VaR mydiv_w = getstyle (mydiv, "width ");
VaR mydiv_h = getstyle (mydiv, "height ");

Mydiv_w = parseint (mydiv_w); // remove the unit "PX"
Mydiv_h = parseint (mydiv_h );

VaR width = pagewidth ();
VaR Height = pageheight ();
VaR left = leftposition ();
VaR Top = topposition ();

VaR div_topposition = Top + (height/2)-(mydiv_h/2); // calculate the top margin
VaR div_leftposition = left + (width/2)-(mydiv_w/2); // calculate the left margin

Mydiv. style. Left = div_leftposition + "PX"; // unit "PX"
Mydiv. style. Top = div_topposition + "PX ";
Mydiv. style. Display = "Block"; // The displayed div is displayed.
}

/** Step 3: Close the window and mask layer. */
Function closediv (){
VaR bigdiv = Document. getelementbyid ("bigdiv ");
VaR mydiv = Document. getelementbyid ("mydiv ");
Document. Body. removechild (bigdiv );
Mydiv. style. Display = "NONE ";
}
/** Step 4: drag the pop-up layer. */
Window. onload = function (){
If (document. getelementbyid ("mydiv ")){
VaR mydiv = Document. getelementbyid ("mydiv ");
VaR dragme = Document. getelementbyid ("dragme ");
Drag. INIT (dragme, mydiv );
}
}

/** Step 5: the pop-up layer follows the scroll bar. */
Window. onscroll = window_onscroll;
Function window_onscroll (){
VaR mydiv = Document. getelementbyid ("mydiv ");
VaR mydiv_h = getstyle (mydiv, "height ");
Mydiv_h = parseint (mydiv_h );
VaR Height = pageheight ();
VaR Top = topposition ();
VaR div_topposition = Top + (height/2)-(mydiv_h/2); // calculate the top margin
Mydiv. style. Top = div_topposition + "PX ";
}

/**
The following are common functions that have been included in my jsskep. js. It can be found in.
Address: http://code.google.com/p/jsskep/
**/
// Calculate the width of the current window //
Function pagewidth (){
Return window. innerwidth! = NULL? Window. innerwidth: document.doc umentelement & document.doc umentelement. clientwidth? Document.doc umentelement. clientwidth: Document. Body! = NULL? Document. Body. clientwidth: NULL;
}

// Calculate the height of the current window //
Function pageheight (){
Return window. innerheight! = NULL? Window. innerheight: document.doc umentelement & document.doc umentelement. clientheight? Document.doc umentelement. clientheight: Document. Body! = NULL? Document. Body. clientheight: NULL;
}

// Calculate the top scroll bar of the current window //
Function topposition (){
Return typeof window. pageyoffset! = 'Undefined '? Window. pageyoffset: document.doc umentelement & document.doc umentelement. scrolltop? Document.doc umentelement. scrolltop: Document. Body. scrolltop? Document. Body. scrolltop: 0;
}

// Calculate the left-side scroll bar of the current window //
Function leftposition (){
Return typeof window. pagexoffset! = 'Undefined '? Window. pagexoffset: document.doc umentelement & document.doc umentelement. scrollleft? Document.doc umentelement. scrollleft: Document. Body. scrollleft? Document. Body. scrollleft: 0;
}

// Solves the problem that external embedded styles cannot be obtained using Js.
Function getstyle (ELEM, name ){
If (ELEM. Style [name])
Return ELEM. Style [name];
Else if (ELEM. currentstyle) // IE
Return ELEM. currentstyle [name];
Else if (document. defaultview & document. defaultview. getcomputedstyle) {// W3C
Name = Name. Replace (/([A-Z])/g, "-$1 ");
Name = Name. tolowercase ();

VaR S = Document. defaultview. getcomputedstyle (ELEM ,"");
Return S & S. getpropertyvalue (name );
} Else
Return null
}
</SCRIPT>
</Head>
<Body>
 
<SELECT> </SELECT>
<P onclick = "alertmsg ()"> open </P>
<Br/> <br/>
<Br/> <br/>
<P onclick = "alertmsg ()"> open </P>
<Br/> <br/>
<Br/> <br/>
<P onclick = "alertmsg ()"> open </P>
<Br/> <br/>

<Div id = "mydiv">
<Input type = "button" value = "close" onclick = "closediv ()"/>
<Div id = "dragme" style = "cursor: move; Background: # ff6500"> you can drag it here. </div>
<Input type = "text"/>
</Div>

</Body>
</Html>