/**
* JavaScript Modeldialog v0.1
*
* New Modeldialog ({
* Caption Title ' dialog box title ' (default)
* Template Subject content ' (default)
* Dialogcls dialog box classname ' Md-dialog ' (default)
* headcls head classname ' md-head ' (default)
* Btnclosecls Close button classname ' Md-close ' (default)
* Bodycls main classname ' md-body ' (default)
* SHADOWBG Mask layer background color ' gray ' (default)
* Transparent 0.2 (default) of shadowopy covering layer
* Dragable can drag true (default)
* Draginwin whether to drag only within the window (TRUE) the default is exclusive to area
* Area [Minx,maxx,miny,maxy] and Draginwin mutual exclusion
* });
*/
Core code:
Copy Code code as follows:
/**
* JavaScript Modeldialog v0.4
* Copyright (c) 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 head classname ' md-head ' (default)
* Btnclosecls Close button classname ' Md-close ' (default)
* Bodycls main classname ' md-body ' (default)
* SHADOWBG Mask layer background color ' gray ' (default)
* Transparent 0.2 (default) of shadowopy covering layer
* Dragable can drag true (default)
* Draginwin whether to drag only within the window (TRUE) the default is exclusive to area
* Area [Minx,maxx,miny,maxy] and Draginwin mutual exclusion
* });
*/
Modeldialog =
function () {
var px = ' px ';
var Isie =/msie/.test (Navigator.userAgent.toLowerCase ());
function Getviewsize () {
return {w:window[' innerwidth '] | | | document.documentElement.clientWidth,
h:window[' innerheight '] | | Document.documentElement.clientHeight}
}
function Getfullsize () {
var w = Math.max (Document.documentElement.clientWidth, document.body.clientWidth) + Math.max ( Document.documentElement.scrollLeft, Document.body.scrollLeft);
var h = Math.max (document.documentelement.clientheight,document.body.clientheight) + Math.max ( Document.documentElement.scrollTop, Document.body.scrollTop);
W = Math.max (document.documentelement.scrollwidth,w);
h = Math.max (document.documentelement.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*100 + ') ':
This[0].style.opacity = val:
This[0].style[name] = val;
return this;
},
Css:function (str) {
This[0].style.csstext = 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 = $ (' div '). Setcls (THIS.DIALOGCLS). css (' position:absolute;z-index:100; ') [0];
This.head = $ (' div '). Setcls (THIS.HEADCLS) [0];
This.label = $ (' label '). HTML (this.caption) [0];
This.btnclose = $ (' div '). Setcls (THIS.BTNCLOSECLS) [0];
This.on (This.btnclose, ' click ', function () {
_this.onclose ();
});
This.head.appendChild (This.label);
This.head.appendChild (This.btnclose);
This.body = $ (' div '). 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 Drag Range
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 = $ ("div"). Setcls (' Md-shadow '). 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.documentElement.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, ' MouseDown ', MouseDown):
This.on (ele, ' MouseDown ', 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
Package Download Address http://www.jb51.net/jiaoben/35245.html
