Encapsulated native JavaScript Popup layer code _ layout and layer

Copy Code code as follows:

<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 Function] '
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.extend (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[]?function/.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.cssText = "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>

box with no options parameter (default high 200px, Width 300px)
General Set high Width box
Width Adaptive content high-wide box
box without pre-loading animation
Delay Automatically disappearing box
Title-Custom Box
box with no title bar
box with close button without title bar
box with buttons and callback parameters

Call the Hongru.box.open (con,options) function, parameter con is the main content of the pop-up layer, can be HTML code. Options are an object, optional parameters are currently

Copy Code code as follows:

{
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
}

The other Hongru.box.ask (Con,options,surecall,cancelcall) is a button-led box with the top two parameters of the callback function, and the last two parameters are ' confirm ' and ' Cancel ' callback function
The transparency gradient and size gradient is added, and the transparency gradient body function is as follows:

Copy Code code as follows:

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+ ') ';
}
},

The box size gradient function body is as follows:

Copy Code code as follows:

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

Okay, no more nonsense to say, attached to the source file package download: mercilessly click here
If you feel good, please move down below the recommended