JavaScript pop-up layer Code

<script type= "Text/javascript" >//<! [cdata[
/* @author: Hongru.chen
* * @date: 2010-09-15
* * @vision: 1.1
*/
var hongru = {};
function $ (ID) {return document.getElementById (ID)}
object.prototype.extend = function (target,/*optional*/ Source,/*optional*/deep) {
target = target | | {};
var stype = typeof source, i = 1, options;
if (stype = = ' undefined ' | | | stype = = ' Boolean ') {
Deep = Stype = = ' Boolean '? Source:false;
Source = target;
target = this;
}
if (typeof source!== ' object ' && object.prototype.tostring.call (source). Call (source)!== ' [Object fun Ction] '
Source = {};

while (I <= 2) {
Options = i = = 1? target:source;
if (options!= null) {
for (var name in options) {
var src = target[name], copy = Options[name];
if (target = = copy)
continue;
if (deep && copy && typeof copy = = ' object ' &&!copy.nodetype)
Target[name] = This.exten D (src | |
(copy.length!= null?) []: {}), copy, deep;
Else if (copy!== undefined)
Target[name = copy;
}
}
i++;
}
return target;
};
Isfunction = function (fn) {
return!! fn && typeof fn!= "string" &&!fn.nodename &&
fn.constructor!= array &&/^[s[]?func Tion/.test (fn + "");
}
Hongru.box = function () {
var box,mask,content,_content,_height,_width,ispreload,flag = false;

return{
Open:function (con,options) {
Default options
var defaultoptions = {
WIDTH:300,
HEIGHT:200,
Ispre:true,
time:0,
Title: ' dialog box ',
Isbar:true,
Isshut:true
};
options = options?options:{};
Options = Object.extend (defaultoptions,options);

if (!flag) {
box = document.createelement (' div '); box.id = "Popup-box";
Box.style.css Tutorial Text = "Position:absolute;" Display:none; Background: #fff URL (preload.gif) no-repeat 50% 50%; border:5px solid #ccc; z-index:2000 ";
Mask = document.createelement (' div '); mask.id = "Popup-mask";
Mask.style.csstext = "Position:absolute; Display:none; top:0; left:0; height:100%; width:100%; Background: #000; Z-index:1500 ";
Content = document.createelement (' div '); content.id = "Popup-content";
Content.style.csstext = "background: #fff";
Bar = document.createelement (' div '); Bar.id = "Popup-bar";
Bar.style.csstext = "Background:none Repeat scroll 0 0 #f7f7f7; border-bottom:4px solid #eeeeee; border-top:3px Solid #f9f9 F9;margin-top:2px;position:relative ";
Wraptit = document.createelement (' div '); Wraptit.id = "Wrap-tit";
Wraptit.style.csstext = "Background:none Repeat scroll 0 0 #f3f3f3; border-bottom:5px solid #f1f1f1; border-top:4px Solid f5f5f5;line-height:5px;margin-top:3px; ";
Tit = document.createelement (' span '); Tit.id = "Popup-tit";
Tit.style.csstext = "Cursor:text;margin-left:10px;position:relative;color: #333; font-size:84%"

Shut = document.createelement (' a '); shut.id = "Popup-shut";
shut.innerhtml = ' x ';
Shut.style.csstext = "color: #34538b; cursor:pointer;font-family:tahoma;font-weight:bold;position:absolute;top : 0px;right:10px;text-decoration:none; ";
Document.body.appendchild (mask); Document.body.appendchild (box); Box.appendchild (bar); Box.appendchild ( content); Bar.appendchild (Wraptit); Bar.appendchild (shut); Wraptit.appendchild (Tit);
Mask.onclick = Shut.onclick = Hongru.box.hide;
//bar.onclick = function () {Alert ($ (' sure '). Id)}

Window.onresize = hongru.box.resize;
Flag = true;
}tit.innerhtml = Options.title;
Options.isshut?shut.style.display = ': Shut.style.display = ' none ';
Options.isbar?bar.style.display = ': Bar.style.display = ' none ';
if (!options.ispre) {
Box.style.width = options.width?options.width+ ' px ': ' Auto ';
Box.style.height = options.height?options.height+ ' px ': ' Auto ';
Box.style.backgroundimage = ' none ';
content.innerhtml = con;
}
else{
Content.style.display = ' none ';
Box.style.width = box.style.height = ' 100px ';
}
This.mask ();
This.alpha (mask,1,50);
_content = con; _height = options.height; _width = options.width; ispreload = Options.ispre;
if (options.time) {
settimeout (function () {hongru.box.hide ()},1000*options.time);
}
},

Fill:function (con,options) {
if (options.ispre) {
if (!options.width | |!options.height) {
var autowidth = box.style.width, autoheight = box.style.height;
content.innerhtml = con;
Box.style.width = options.width?options.width+ ' px ': ';
Box.style.height = options.height?options.height+ ' px ': ';
Content.style.display = ';
Options.width = parseint (box.offsetwidth-10);
Options.height = parseint (box.offsetheight-10);
Content.style.display = ' None ';
Box.style.width = Autowidth;
Box.style.height = Autoheight;
}
else{
content.innerhtml = con;

}
This.size (Box,options.width,options.height);
}
else{
Box.style.backgroundimage = ' None ';
}
},

Hide:function () {
Hongru.box.alpha (box,-1,0);
},

Resize:function () {
Hongru.box.pos ();
Hongru.box.mask ();
},

Mask:function () {
Mask.style.height = Hongru.page.total (1) + ' px ';
Mask.style.width= '; Mask.style.width = hongru.page.total (0) + ' px ';
},

Pos:function () {
var mintop = (Hongru.page.height ()/2)-(BOX.OFFSETHEIGHT/2); Mintop = mintop<10?10:mintop;
Box.style.top= (Mintop+hongru.page.top ()) + ' px ';
Box.style.left= (Hongru.page.width ()/2)-(BOX.OFFSETWIDTH/2) + ' px ';
},

Alpha:function (obj,direction,destination) {
Clearinterval (obj.animing);
if (direction = = 1) {
obj.style.opacity=0; Obj.style.filter= ' alpha (opacity=0) ';
obj.style.display= ' block '; This.pos ();
}
obj.animing = setinterval (function () {Hongru.box.alphaanim (obj,destination,direction)},50);
},

Alphaanim:function (obj,destination,direction) {
var opacity = Math.Round (obj.style.opacity*100);
if (opacity = = destination) {
Clearinterval (obj.animing);
if (direction = = 1) {
obj.style.display= ' none ';
obj = = Box?hongru.box.alpha (mask,-1,0): Content.innerhtml=box.style.backgroundimage= ';
}else{
Curoptions = {Width:_width,height:_height,ispre:ispreload}
obj = = Mask?this.alpha (box,1,100): Hongru.box.fill (_content,curoptions);
}
}else{
var n=math.ceil (opacity+ ((destination-opacity) *.5)) N=n==1?0:n;
Obj.style.opacity=n/100;
Obj.style.filter= ' alpha (opacity= ' +n+ ') ';
}
},

Size:function (obj,width,height) {
obj = typeof obj = = ' object '? Obj: $ (obj);
Clearinterval (obj.sizing);
var offsetw = obj.offsetwidth, Offseth = obj.offsetheight,
Otherw = Offsetw-parseint (obj.style.width), Otherh = Offseth-parseint (Obj.style.height);
var wflag = (offsetw-otherw>width)? 0:1, Hflag = (offseth-otherh>height)? 0:1;
Obj.sizing = setinterval (function () {Hongru.box.sizeanim (Obj,width,otherw,wflag,height,otherh,hflag)},20);
},

Sizeanim:function (Obj,width,otherw,wflag,height,otherh,hflag) {
var objw = obj.offsetwidth-otherw, objh = Obj.offsetheight-otherh;
if (objw = width && objh = height) {
Clearinterval (obj.sizing);
Box.style.backgroundimage= ' None ';
content.style.display= ' block ';
}else{
if (objw!=width) {
var n = objw+ ((WIDTH-OBJW) *.5);
Obj.style.width = Wflag?math.ceil (n) + ' px ': Math.floor (n) + ' px ';
}
if (objh!=height) {
var n = objh+ ((HEIGHT-OBJH) *.5);
Obj.style.height = Hflag?math.ceil (n) + ' px ': Math.floor (n) + ' px ';
}
This.pos ();

}
},

Ask:function (Message,options,surecall,cancelcall) {
var elements = ' <div class= ' wrap-remind ' style= ' text-align:center ' > ' +message+ ' <p><button id= ' sure-btn "Class=" sure-btn > Confirmation </button> <button id= "cancel-btn" class= "Cancel-btn" > Cancel </button></p ></div> ';
Hongru.box.open (elements,options);

function delay () {//callback
if (($ (' sure-btn ') && $ (' cancel-btn '))!= null) {
Clearinterval (Checkcomplete);
Alert (' Yes ');
$ (' sure-btn '). onclick = function () {
if (Isfunction (Surecall)) {Surecall.call (this);}
}
$ (' cancel-btn '). onclick = function () {
if (Isfunction (Cancelcall)) {Cancelcall.call (this);}
Hongru.box.hide ();
}
}}
var checkcomplete = setinterval (delay,100);
}
}
}();
Hongru.page=function () {
return{
Top:function () {return document.documentelement.scrolltop| | Document.body.scrolltop},
Width:function () {return self.innerwidth| | document.documentelement.clientwidth| | Document.body.clientwidth},
Height:function () {return self.innerheight| | document.documentelement.clientheight| | Document.body.clientheight},
Total:function (d) {
var b=document.body, E=document.documentelement;
Return D?math.max (Math.max (b.scrollheight,e.scrollheight), Math.max (b.clientheight,e.clientheight)):
Math.max (Math.max (b.scrollwidth,e.scrollwidth), Math.max (B.clientwidth,e.clientwidth))
}
}
}();
]]></script>

{
width:300//Custom, pop-up layer body (except the width of the border and title bar), adaptive for 0 o'clock.
height:200//Custom, pop-up layer body (except the height of the border and title bar), adaptive for 0 o'clock.
Ispre:1//true or FALSE, is there a preload background image,
time:0//Delay automatic shutdown time, seconds in units, 0 o'clock not trigger
Title: '//Custom title
Isbar:1//true or FALSE, whether there is a title bar
Isshut:1//Whether there is a close button
}

Show Sourceview sourceprint?alphaanim:function (obj,destination,direction) {
var opacity = Math.Round (obj.style.opacity*100);
if (opacity = = destination) {
Clearinterval (obj.animing);
if (direction = = 1) {
Obj.style.display= ' None ';
obj = = Box?hongru.box.alpha (mask,-1,0): Content.innerhtml=box.style.backgroundimage= ';
}else{
Curoptions = {Width:_width,height:_height,ispre:ispreload}
obj = = Mask?this.alpha (box,1,100): Hongru.box.fill (_content,curoptions);
}
}else{
var N=math.ceil ((opacity+ (destination-opacity) *.5)); N=n==1?0:n;
obj.style.opacity=n/100;
Obj.style.filter= ' alpha (opacity= ' +n+ ') ';
}
},

Box code

Show Sourceview sourceprint?sizeanim:function (Obj,width,otherw,wflag,height,otherh,hflag) {
var objw = obj.offsetwidth-otherw, objh = Obj.offsetheight-otherh;
if (objw = width && objh = height) {
Clearinterval (obj.sizing);
Box.style.backgroundimage= ' None ';
content.style.display= ' block ';
}else{
if (objw!=width) {
var n = objw+ ((WIDTH-OBJW) *.5);
Obj.style.width = Wflag?math.ceil (n) + ' px ': Math.floor (n) + ' px ';
}
if (objh!=height) {
var n = objh+ ((HEIGHT-OBJH) *.5);
Obj.style.height = Hflag?math.ceil (n) + ' px ': Math.floor (n) + ' px ';
}
This.pos ();
}
},

Below look at a complete pop-up layer instance code

JScript file
if (navigator.userAgent.toLowerCase (). indexof (' MSIE ') >-1) {
Window.isie = true;
Window.isie6 = Navigator.appversion.indexof ("MSIE 6.0;") >-1;
Window.isie7 = Navigator.appversion.indexof ("MSIE 7.0;") >-1;
WINDOW.ISIE8 = Navigator.appversion.indexof ("MSIE 8.0;") >-1;
}
var $ = function (ObjID) {return document.getElementById (ObjID)};
var _flyout;
var _fadetimer;
function Showflyout (divwidth, Divheight, paddingwidth) {
var flyout = function () {
}
Flyout.prototype = {
Clientwidth:document.documentelement.clientwidth,
Clientheight:document.documentelement.clientheight,
Scrollwidth:document.documentelement.scrollwidth,
Scrollheight:document.documentelement.scrollheight,
Iframeid: "Envelopiframe",
divID: "Popupcontent",
Iframebgcolor: "#888888",
Show:function (divcontent) {
Create envelop IFRAME
Csstext = "Position:absolute; z-index:100; Background-color: #888888; border-width:0px; Filter:alpha (opacity=0); opacity:0.0; ";
Csstext + = "left:0px;";
Csstext + = "top:0px;";
Csstext + = "width:" + this.scrollwidth + "px;";
Csstext + = "Height:" + this.scrollheight + "px;";
This.create ("iframe", This.iframeid, Csstext, "cppl_iframesrc.htm", "");
_fadetimer = setinterval (function () {fadeiframe ("Envelopiframe", 0.05, 0, 0.5, True)}, 5);
Create flyout
var csstext = "";
Csstext + = "display:block; _position:absolute; position:fixed; z-index:101; Border:solid 1px Gray; Background-color:white; ";
Csstext + = "Left:" + (This.clientwidth-divwidth-paddingwidth)/2 + "PX;";
Csstext + = "Top:" + (This.clientheight-divheight-paddingwidth)/2 + "PX;";
Csstext + = "width:" + (Divwidth + paddingwidth) + "PX;";
Csstext + = "Height:" + (Divheight + paddingwidth) + "PX;";
This.create ("div", This.divid, Csstext, "", divcontent);
},
Create:function (type, ID, csstext, iframesrc, innerHTML) {
var obj = document.createelement (type);
if (Iframesrc.length > 0) {
OBJ.SRC = IFRAMESRC;
}
Obj.setattribute ("id", id);
Obj.style.csstext = Csstext;
if (Innerhtml.length > 0) {
obj.innerhtml = innerHTML;
}
Document.body.appendchild (obj);
if (Iframesrc.length > 0) {
if (Window.isie) {
Window.envelopiframe.document.bgcolor = This.iframebgcolor;
}
}
},
Close:function () {
var objiframe = document.getElementById (This.iframeid);
var objdiv = document.getElementById (This.divid);
if (objiframe && objdiv) {
Document.body.removechild (Objiframe);
Document.body.removechild (OBJDIV);
}
},
Onresize:function () {
var objiframe = document.getElementById (This.iframeid);
var objdiv = document.getElementById (This.divid);
if (objiframe && objdiv) {
Objiframe.style.width = document.documentelement.scrollwidth + "px";
Objiframe.style.height = document.documentelement.scrollheight + "px";
Objdiv.style.left = (document.documentelement.clientwidth-divwidth)/2 + "px";
Objdiv.style.top = (document.documentelement.clientheight-divheight)/2 + "px";
}
},
Onscroll:function () {
var objdiv = document.getElementById (This.divid);
if (objdiv) {
Objdiv.style.left = (document.documentelement.clientwidth-divwidth)/2 + document.documentelement.scrollleft + "px";
Objdiv.style.top = (document.documentelement.clientheight-divheight)/2 + document.documentelement.scrolltop + "px";
}
}
};
_flyout = new flyout ();
_flyout.show ("This is a flyout.<div onclick=" javascript:closeflyout () ">close flyout</div>");
}
function Closeflyout () {
Clearinterval (_fadetimer);
_fadetimer = setinterval (function () {fadeiframe ("Envelopiframe", 0.05, 0, 0.5, False)}, 5);
}
Window.onresize = function () {
if (_flyout) {
_flyout.onresize ();
}
};
Window.onscroll = function () {
if (_flyout && isie6) {
_flyout.onscroll ();
}
};
function Fadeiframe (ObjID, Speed, minopacity, maxopacity, flag) {
var dialog = $ (objid);
if (dialog) {
var value;
if (flag) {
if (parsefloat (dialog.style.opacity) <= maxopacity) {
Value = parsefloat (dialog.style.opacity) + speed;
Dialog.style.filter = ' alpha (opacity= ' + value * 100 + ') ';
dialog.style.opacity = ' + value + ';
}
else {
Clearinterval (_fadetimer);
}
}
else {
if (parsefloat (dialog.style.opacity) >= minopacity) {
Value = parsefloat (dialog.style.opacity)-speed;
Dialog.style.filter = ' alpha (opacity= ' + value * 100 + ') ';
dialog.style.opacity = ' + value + ';
}
else {
Clearinterval (_fadetimer);
if (_flyout) {
_flyout.close ();
}
}
}
}
}

Invoke ASP Tutorial x code:
Copy code code as follows:
<%@ page language= "C #" autoeventwireup= "true" codefile= "Default.aspx.cs" inherits= "_default"%>
<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ">
<title>flyout sample</title>
<script type= "Text/javascript" src= "Flyout.js" ></script>
<body>
<form id= "Form1" runat= "Server" >
<div>
<div onclick= "Javascript:showflyout (700, 300, 10);" >
Click me to test
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>

</div>
</form>
</body>