<! 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>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> Display Effect of JavaScript-like LightBox content </title>
</Head>
<Body>
<Br/>
<Script>
Var isIE = (document. all )? True: false;
Var isIE6 = isIE & ([/MSIE (\ d) \. 0/I .exe c (navigator. userAgent)] [0] [1] = 6 );
Var $ = function (id ){
Return "string" = typeof id? Document. getElementById (id): id;
};
Var Class = {
Create: function (){
Return function () {this. initialize. apply (this, arguments );}
}
}
Var Extend = function (destination, source ){
For (var property in source ){
Destination [property] = source [property];
}
}
Var Bind = function (object, fun ){
Return function (){
Return fun. apply (object, arguments );
}
}
Var Each = function (list, fun ){
For (var I = 0, len = list. length; I <len; I ++) {fun (list [I], I );}
};
Var Contains = function (a, B ){
Return a. contains? A! = B & a. contains (B ):!! (A. compareDocumentPosition (B) & 16 );
}
Var OverLay = Class. create ();
OverLay. prototype = {
Initialize: function (options ){
This. SetOptions (options );
This. Lay = $ (this. options. Lay) | document. body. insertBefore (document. createElement ("div"), document. body. childNodes [0]);
This. Color = this. options. Color;
This. Opacity = parseInt (this. options. Opacity );
This. zIndex = parseInt (this. options. zIndex );
With (this. lay. style) {display = "none"; zIndex = this. zIndex; left = top = 0; position = "fixed"; width = height = "100% ";}
If (isIE6 ){
This. Lay. style. position = "absolute ";
// Ie6 sets the overlay size program
This. _ resize = Bind (this, function (){
This. Lay. style. width = Math.max(document.doc umentElement. scrollWidth, document.doc umentElement. clientWidth) + "px ";
This. Lay. style. height = Math.max(document.doc umentElement. scrollHeight, document.doc umentElement. clientHeight) + "px ";
});
// Overwrite the select statement
This. lay. innerHTML = '<iframe style = "position: absolute; top: 0; left: 0; width: 100%; height: 100%; filter: alpha (opacity = 0 ); "> </iframe>'
}
},
// Set the default attribute
SetOptions: function (options ){
This. options = {// Default Value
Lay: null, // override object
Color: "# fff", // background Color
Opacity: 50, // transparency (0-100)
ZIndex: 1000 // cascade order
};
Extend (this. options, options || {});
},
// Display
Show: function (){
// Compatible with ie6
If (isIE6) {this. _ resize (); window. attachEvent ("onresize", this. _ resize );}
// Set the style
With (this. Lay. style ){
// Set transparency
IsIE? Filter = "alpha (opacity:" + this. Opacity + ")": opacity = this. Opacity/100;
BackgroundColor = this. Color; display = "block ";
}
},
// Close
Close: function (){
This. Lay. style. display = "none ";
If (isIE6) {window. detachEvent ("onresize", this. _ resize );}
}
};
Var LightBox = Class. create ();
LightBox. prototype = {
Initialize: function (box, options ){
This. Box = $ (box); // display Layer
This. OverLay = new OverLay (options); // OverLay
This. SetOptions (options );
This. Fixed = !! This. options. Fixed;
This. Over = !! This. options. Over;
This. Center = !! This. options. Center;
This. onShow = this. options. onShow;
This. Box. style. zIndex = this. OverLay. zIndex + 1;
This. Box. style. display = "none ";
// Compatible with attributes used by ie6
If (isIE6 ){
This. _ top = this. _ left = 0; this. _ select = [];
This. _ fixed = Bind (this, function () {this. Center? This. SetCenter (): this. SetFixed ();});
}
},
// Set the default attribute
SetOptions: function (options ){
This. options = {// Default Value
Over: true, // whether to display Overwriting
Fixed: false, // Fixed Positioning
Center: false, // whether to Center
OnShow: function () {}// executed during display
};
Extend (this. options, options || {});
},
// Compatible with the fixed positioning program of ie6
SetFixed: function (){
This. Box. style. top = document.doc umentElement. scrollTop-this. _ top + this. Box. offsetTop + "px ";
This. Box. style. left = document.doc umentElement. scrollLeft-this. _ left + this. Box. offsetLeft + "px ";
This. _ top = document.doc umentElement. scrollTop; this. _ left = document.doc umentElement. scrollLeft;
},
// Compatible with the center positioning program of ie6
SetCenter: function (){
This. Box. style. marginTop = document.doc umentElement. scrollTop-this. Box. offsetHeight/2 + "px ";
This. Box. style. marginLeft = document.doc umentElement. scrollLeft-this. Box. offsetWidth/2 + "px ";
},
// Display
Show: function (options ){
// Fixed Positioning
This. Box. style. position = this. Fixed &&! IsIE6? "Fixed": "absolute ";
// Cover Layer
This. Over & this. OverLay. Show ();
This. Box. style. display = "block ";
// Center
If (this. Center ){
This. Box. style. top = this. Box. style. left = "50% ";
// Set margin
If (this. Fixed ){
This. Box. style. marginTop =-this. Box. offsetHeight/2 + "px ";
This. Box. style. marginLeft =-this. Box. offsetWidth/2 + "px ";
} Else {
This. SetCenter ();
}
}
// Compatible with ie6
If (isIE6 ){
If (! This. Over ){
// No overlay layer ie6 needs to hide select that is not on the Box
This. _ select. length = 0;
Each (document. getElementsByTagName ("select"), Bind (this, function (o ){
If (! Contains (this. Box, o) {o. style. visibility = "hidden"; this. _ select. push (o );}
}))
}
// Set the display position
This. Center? This. SetCenter (): this. Fixed & this. SetFixed ();
// Set Positioning
This. Fixed & window. attachEvent ("onscroll", this. _ fixed );
}
This. onShow ();
},
// Close
Close: function (){
This. Box. style. display = "none ";
This. OverLay. Close ();
If (isIE6 ){
Window. detachEvent ("onscroll", this. _ fixed );
Each (this. _ select, function (o) {o. style. visibility = "visible ";});
}
}
};
</Script>
<Style>
. Lightbox {width: 300px; background: # FFFFFF; border: 1px solid # ccc; line-height: 25px; top: 20%; left: 20% ;}
. Lightbox dt {background: # f4f4f4; padding: 5px ;}
</Style>
<Dl id = "idBox" class = "lightbox">
<Dt id = "idBoxHead"> <B> LightBox </B> </dt>
<Dd>
Content display
<Br/>
<Input name = "" type = "button" value = "Disable" id = "idBoxCancel"/>
<Br/>
</Dd>
</Dl>
<Div style = "margin: 0 auto; width: 900px; height: 1000px; border: 1px solid #000000;">
<Input type = "button" value = "Disable overwriting" id = "btnOverlay"/>
<Input type = "button" value = "black cover" id = "btnOverColor"/>
<Input type = "button" value = "completely transparent cover" id = "btnOverOpacity"/>
<Input type = "button" value = "positioning effect" id = "btnFixed"/>
<Input type = "button" value = "center effect" id = "btnCenter"/>
<Br/> <br/> <br/>
<Select>
<Option> overwrite select test </option>
</Select>
<Input name = "" type = "button" value = "open" id = "idBoxOpen"/>
</Div>
<Script>
Var box = new LightBox ("idBox ");
$ ("IdBoxCancel"). onclick = function () {box. Close ();}
$ ("IdBoxOpen"). onclick = function () {box. Show ();}
$ ("BtnOverlay"). onclick = function (){
Box. Close ();
If (box. Over ){
Box. Over = false;
This. value = "enable overwriting ";
} Else {
Box. Over = true;
This. value = "Disable overwriting ";
}
}
$ ("BtnOverColor"). onclick = function (){
Box. Close ();
Box. Over = true;
If (box. OverLay. Color = "# fff "){
Box. OverLay. Color = "#000 ";
This. value = "White overlay ";
} Else {
Box. OverLay. Color = "# fff"
This. value = "Black overlay ";
}
}
$ ("BtnOverOpacity"). onclick = function (){
Box. Close ();
Box. Over = true;
If (box. OverLay. Opacity = 0 ){
Box. OverLay. Opacity = 50;
This. value = "Full Transparent cover ";
} Else {
Box. OverLay. Opacity = 0;
This. value = "semi-transparent overwriting ";
}
}
$ ("BtnFixed"). onclick = function (){
Box. Close ();
If (box. Fixed ){
Box. Fixed = false;
This. value = "positioning effect ";
} Else {
Box. Fixed = true;
This. value = "unlocate ";
} Www.2cto.com
}
$ ("BtnCenter"). onclick = function (){
Box. Close ();
If (box. Center ){
Box. Center = false;
Box. Box. style. left = box. Box. style. top = "20% ";
Box. Box. style. marginTop = box. Box. style. marginLeft = "0 ";
This. value = "center effect ";
} Else {
Box. Center = true;
This. value = "reposition ";
}
}
</Script>
</Body>
</Html>