ModelDialogJavaScript Modal Dialog Box class code _ javascript skills

ModelDialogJavaScript modal dialog box code. For more information, see. /**
* JavaScript ModelDialog v0.1
*
* New ModelDialog ({
* Caption title 'Dialog box title' (default)
* Template subject content ''(default)
* DialogCls dialog box className 'md-dialog '(default)
* HeadCls header className 'md-head' (default)
* BtnCloseCls close button className 'md-close' (default)
* BodyCls subject className 'md-body' (default)
* ShadowBg specifies the background color 'Gray '(default)
* ShadowOpy the transparent 0.2 (default) of the covering layer)
* Whether dragable can be dragged to true (default)
* Whether dragInWin is only dragged in the window (true) is mutually exclusive with area by default
* Area [minX, maxX, minY, maxY] And dragInWin are mutually exclusive.
*});
*/

Core code:

The Code is as follows:

/**
* JavaScript ModelDialog v0.4
* Copyright (c) 2010 snandy
* Blog: http://snandy.javaeye.com/
* QQ group: 34580561
* Date: 2010-09-08
*
*
* New ModelDialog ({
* Caption title 'Dialog box title' (default)
* Template subject content ''(default)
* DialogCls dialog box className 'md-dialog '(default)
* HeadCls header className 'md-head' (default)
* BtnCloseCls close button className 'md-close' (default)
* BodyCls subject className 'md-body' (default)
* ShadowBg specifies the background color 'Gray '(default)
* ShadowOpy the transparent 0.2 (default) of the covering layer)
* Whether dragable can be dragged to true (default)
* Whether dragInWin is only dragged in the window (true) is mutually exclusive with area by default
* Area [minX, maxX, minY, maxY] And dragInWin are mutually exclusive.
*});
*/
ModelDialog =
Function (){
Var px = 'px ';
Var isIE =/msie/. test (navigator. userAgent. toLowerCase ());

Function getViewSize (){
Return {w: window ['initwidth'] | document.doc umentElement. clientWidth,
H: window ['nerheight'] | document.doc umentElement. clientHeight}
}
Function getFullSize (){
Var w = Math.max(document.doc umentElement. clientWidth, document. body. clientWidth) + Math.max(document.doc umentElement. scrollLeft, document. body. scrollLeft );
Var h = Math.max(document.doc umentElement. clientHeight, document. body. clientHeight) + Math.max(document.doc umentElement. scrollTop, document. body. scrollTop );
W = Math.max(document.doc umentElement. scrollWidth, w );
H = Math.max(document.doc umentElement. scrollHeight, h );
Return {w: w, h: h };
}
Function $ (tag ){
Return new $. prototype. init (tag );
}
$. Prototype = {
Init: function (tag ){
This [0] = document. createElement (tag );
Return this;
},
SetCls: function (cls ){
This [0]. className = cls;
Return this;
},
SetSty: function (name, val ){
Name = 'opacity '?
IsIE?
This [0]. style. filter = 'Alpha (Opacity = '+ val x 100 + ')':
This [0]. style. opacity = val:
This [0]. style [name] = val;
Return this;
},
Css: function (str ){
This[02.16.style.css Text = str;
Return this;
},
Html: function (str ){
This [0]. innerHTML = str;
Return this;
}
}
$. Prototype. init. prototype = $. prototype;

Function ModelDialog (opt ){
This. dialogCls = opt. dialogCls | 'md-dialog ';
This. headCls = opt. headCls | 'md-head ';
This. btnCloseCls = opt. btnCloseCls | 'md-close ';
This. bodyCls = opt. bodyCls | 'md-body ';
This. shadowBg = opt. shadowBg | 'Gray ';
This. shadowOpy = opt. shadowOpy | '0. 2 ';
This. caption = opt. caption | "dialog box title ";
This. template = opt. template | '';
This. dragable = opt. dragable! = False;
This. dragInWin = opt. dragInWin! = False;
This. area = opt. area;
This. dialog = null;
This. head = null;
This. label = null;
This. btnClose = null;
This. body = null;
This. shadow = null;
This. init ();
}
ModelDialog. prototype = {
Init: function (){
Var _ this = this;
This. dialog = ('p'hangzhou.setcls(this.dialogcls).css ('position: absolute; z-index: 100; ') [0];
This. head = $ ('P'). setCls (this. headCls) [0];
This. label = condition ('label'0000.html (this. caption) [0];
This. btnClose = $ ('P'). setCls (this. btnCloseCls) [0];
This. on (this. btnClose, 'click', function (){
_ This. onClose ();
});
This. head. appendChild (this. label );
This. head. appendChild (this. btnClose );
This. body = $ ('P'). setCls (this. bodyCls) [0];
This. setContent (this. template );
This. dialog. appendChild (this. head );
This. dialog. appendChild (this. body );
This. createShadow ();
Document. body. appendChild (this. shadow );
Document. body. appendChild (this. dialog );
This. moveToCenter ();
// Calculate the drag range
// In standard mode: clientWidth = width + padding; offsetWidth = width + padding + border
If (this. dragable ){
If (this. dragInWin ){
Var maxX = getViewSize (). w-this. dialog. offsetWidth;
Var maxY = getViewSize (). h-this. dialog. offsetHeight;
This. dragdrop (this. dialog ,{
Bridge: this. head,
Area: [0, maxX, 0, maxY]
});
Return;
}
If (this. area ){
This. dragdrop (this. dialog ,{
Bridge: this. head,
Area: this. area
});
Return;
}
This. dragdrop (this. dialog ,{
Bridge: this. head
});

}

},
Destroy: function (){
This. dialog = null;
This. head = null;
This. label = null;
This. btnClose = null;
This. body = null;
This. shadow = null;
},
CreateShadow: function (){
Var str = 'position: absolute; left: 0px; top: 0px; z-index: 1' +
'; Width:' + getFullSize (). w + px +
'; Height:' + getFullSize (). h + px +
'; Background:' + this. shadowBg +
'; Opacity:' + this. shadowOpy +
'; Filter: Alpha (Opacity =' + this. shadowOpy * 100 + ');';
Var _ this = this;
This. shadow = $ ("p" character .setcls('md-shadow'character .css (str) [0];
This. on (window, 'resize', function (){
_ This. shadow. style. width = getFullSize (). w + px;
_ This. shadow. style. height = getFullSize (). h + px;
_ This. moveToCenter ();
});
},
MoveTo: function (x, y ){
This. dialog. style. left = x + px;
This. dialog. style. top = y + px;
},
MoveToCenter: function (){
Var size = getViewSize ();
Var x = (size. w-50)/2-(this. dialog. clientWidth-50)/2;
Var y = (size. h-50)/2-(this. dialog. clientHeight-50)/2 + document.doc umentElement. scrollTop;
This. moveTo (x, y );
},
SetCaption: function (v ){
This. caption = v;
This. label. innerHTML = v;
},
SetContent: function (str ){
This. template = str;
This. body. innerHTML = str;
},
OnClose: function (){
Document. body. removeChild (this. dialog );
Document. body. removeChild (this. shadow );
If (this ['onbi']) {
This. onbi ();
}
This. destroy ();
},
On: function (el, type, fn ){
El. addEventListener?
El. addEventListener (type, fn, false ):
El. attachEvent?
El. attachEvent ("on" + type, fn ):
El ['on' + type] = fn;
},
Un: function (el, type, fn ){
El. removeEventListener?
El. removeEventListener (type, fn, false ):
El. detachEvent?
El. detachEvent ("on" + type, fn ):
El ['on' + type] = null;
},
Dragdrop: function (){
Return function (el, opt ){
Var _ this = this, ele, diffX, diffY, dragX = true, dragY = true, minX, maxX, minY, maxY, bridge;
Ele = el;
Opt & opt. dragX ===false & (dragX = false );
Opt & opt. dragY ===false & (dragY = false );
Opt & opt. area & typeof opt. area [0] === 'number' & (minX = opt. area [0]);
Opt & opt. area & typeof opt. area [1] === 'number' & (maxX = opt. area [1]);
Opt & opt. area & typeof opt. area [2] === 'number' & (minY = opt. area [2]);
Opt & opt. area & typeof opt. area [3] === 'number' & (maxY = opt. area [3]);
Opt & opt. bridge & (bridge = opt. bridge );
Ele. style. position = 'absolute ';
Bridge?
This. on (bridge, 'mouseshutdown ', mousedown ):
This. on (ele, 'mouseshutdown ', mousedown );
Function mousedown (e ){
E = e | window. event;
Ele. style. cursor = 'pointer ';
If (ele. setCapture) {// IE
_ This. on (ele, "losecapture", mouseup );
Ele. setCapture ();
E. cancelBubble = true; // IE
} Else if (window. captureEvents) {// standard DOM
E. stopPropagation ();
_ This. on (window, "blur", mouseup );
E. preventDefault ();
}
_ X = e. clientX;
_ Y = e. clientY;
DiffX = e. clientX-ele. offsetLeft;
DiffY = e. clientY-ele. offsetTop;
_ This. on (document, 'mousemove ', mousemove );
_ This. on (document, 'mouseup', mouseup );
}
Function mousemove (e ){
E = e | window. event;
Var moveX = e. clientX-diffX,
MoveY = e. clientY-diffY;
MoveX <minX & (moveX = minX); // left minimum value
MoveX> maxX & (moveX = maxX); // left maximum value
MoveY <minY & (moveY = minY); // top minimum value
MoveY> maxY & (moveY = maxY); // top maximum value

DragX & (ele. style. left = moveX + 'px ');
DragY & (ele. style. top = moveY + 'px ');
}
Function mouseup (e ){
Ele. style. cursor = 'default ';
_ This. un (document, 'mousemove ', mousemove );
_ This. un (document, 'mouseup', mouseup );
If (ele. releaseCapture) {// IE
_ This. un (ele, "losecapture", mouseup );
Ele. releaseCapture ();
}
If (window. releaseEvents) {// standard DOM
_ This. un (window, "blur", mouseup );
}
}
}
}()

}
Return ModelDialog;
}();

Demo address http://demo.jb51.net/js/2011/ModelDialog/index.html
Packaging http://www.jb51.net/jiaoben/35245.html