Encapsulated native javascript pop-up Layer Code

Copy codeThe Code is 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 & amp;/^ [\ 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.css 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.css Text = "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.css Text = "background: # fff ";
Bar = document. createElement ('div '); bar. id = "popup-bar ";
Bar.style.css Text = "background: none repeat scroll 0 0 # F7F7F7; border-bottom: 4px solid # EEEEEE; border-top: 3px solid # F9F9F9; margin-top: 2px; position: relative ";
WrapTit = document. createElement ('div '); wrapTit. id = "wrap-tit ";
WrapTit.style.css Text = "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.css Text = "cursor: text; margin-left: 10px; position: relative; color: #333; font-size: 84%"

Shut = document. createElement ('A'); shut. id = "popup-shut ";
Shut. innerHTML = '× ';
Shut.style.css Text = "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. The offsetWidth-10 );
Options. height = parseInt (box. The 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 = 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 )? ;
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, ob1_= obj. offsetHeight-otherH;
If (objW = width & ob1_= = 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 (obelist! = Height ){
Var n = ob1_+ (height-ob1_) *. 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 "> OK </button> <button id =" cancel- btn "class =" cancel-btn "> cancel </button> </p> </div> ';
Hongru. box. open (elements, options );

Function delay () {// callback
If ($ ('Sure-btn ') & $ ('cel-btn '))! = Null ){
ClearInterval (checkComplete );
// Alert ('yes ');
$ ('Ure-btn '). onclick = function (){
If (isFunction (sureCall) {sureCall. call (this );}
}
$ ('Cel-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.doc umentElement. scrollTop | document. body. scrollTop },
Width: function () {return self. innerWidth | document.doc umentElement. clientWidth | document. body. clientWidth },
Height: function () {return self. innerHeight | document.doc umentElement. clientHeight | document. body. clientHeight },
Total: function (d ){
Var B = document. body, ew.document.doc umentElement;
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 without any options parameter (the default height is 200px and the width is 300px)
Ordinary box with a set height and width
Box with high width adaptive content and high width
Box without pre-loaded Animation
Box with automatic delay
Title custom box
Box without a title bar
Box without the title bar close button
Box with buttons and callback Parameters

Call the Hongru. box. open (con, options) function. The con parameter is the main content of the pop-up layer, which can be html code. Options is an object. The optional parameters include:
Copy codeThe Code is as follows:
{
Width: 300 // custom, the pop-up layer body (except the border and the width of the title bar), 0 adaptive.
Height: 200 // custom, the pop-up layer body (except the border and the height of the title bar), 0 adaptive.
IsPre: 1 // true or false, whether there is a pre-loaded background image,
Time: 0 // The time when the delay is automatically disabled. The unit is seconds. If the delay is 0, it is not triggered.
Title: ''// custom title
IsBar: 1 // true or false, whether the title bar exists
IsShut: 1 // whether the button is closed
}

Other Hongru. box. ask (con, options, surecall, cancelcall) is a prompt box with buttons. The first two parameters with callback functions are the same as above, and the last two parameters are the 'confirmed' and 'cancel' callback functions respectively.
Transparency gradient and size gradient are added. The main function of transparency gradient is as follows:
Copy codeThe Code is 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 = 1? 0: n;
Obj. style. opacity = n/100;
Obj. style. filter = 'Alpha (opacity = '+ n + ')';
}
},

Box Size gradient function body:
Copy codeThe Code is as follows:
Show sourceview sourceprint? SizeAnim: function (obj, width, otherW, wFlag, height, otherH, hFlag ){
Var objW = obj. offsetWidth-otherW, ob1_= obj. offsetHeight-otherH;
If (objW = width & ob1_= = 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 (obelist! = Height ){
Var n = ob1_+ (height-ob1_) *. 5 );
Obj. style. height = hFlag? Math. ceil (n) + 'px ': Math. floor (n) + 'px ';
}
This. pos ();
}
},

Okay, I don't need to talk about it anymore. I need to package the source file and download it: click here.
If you think it is good, please take a look at the following recommendations