Jquerydialog Non-modal Popup

Source: http://www.cnblogs.com/wu-jian/archive/2010/02/03/1662751.html

I want to modify the non-modal, can pop up multiple div. Similar to multi-window, close and drag cannot be implemented. Please help the group to see, greatly appreciated! You can now pop up multiple div through the Showdiv method.
var Jquerydialog = {

Configuration Items
modal window background color
"Cbackgroundcolor": "#ffffff",

Shadow Distance (right)
"Cshdowright": 5,
Shadow Distance (bottom)
"Cshdowdown": 5,

Border size (pixels)
"Cbordersize": 2,
Border color
"Cbordercolor": "#999999",

Header background Color
"Cheaderbackgroundcolor": "#f0f0f0",
Close the display text in the upper right corner
"Cclosetext": "X off",
Prompt text when the mouse moves up
"Cclosetitle": "Off",

Bottom background color
"Cbottombackgroundcolor": "#f0f0f0",
Submit Button Text
"Csubmittext": "Submit",
Cancel button text
"Ccanceltext": "Cancel",

Drag effect
"Cdragtime": "100",

<summary> Create dialog box (custom) </summary>
<param name= "DialogTitle" > dialog box title </param>
<param name= "IFRAMESRC" >iframe embed page address </param>
<param name= "iframewidth" >iframe embedded page width </param>
<param name= "iframeheight" >iframe embedded page height </param>
Open:function (DialogTitle, IFRAMESRC, Iframewidth, iframeheight) {
Jquerydialog.init (DialogTitle, IFRAMESRC, Iframewidth, Iframeheight, True, true);
},
Showdiv:function (Id_,dialogtitle, IFRAMESRC, Iframewidth, iframeheight) {
Jquerydialog.init2 (Id_,dialogtitle, IFRAMESRC, Iframewidth, Iframeheight, True, true);
},
<summary> Create dialog box (custom 1, not including bottom) </summary>
<param name= "DialogTitle" > dialog box title </param>
<param name= "IFRAMESRC" >iframe embed page address </param>
<param name= "iframewidth" >iframe embedded page width </param>
<param name= "iframeheight" >iframe embedded page height </param>
Open1:function (DialogTitle, IFRAMESRC, Iframewidth, iframeheight) {
Jquerydialog.init (DialogTitle, IFRAMESRC, Iframewidth, Iframeheight, False, true);
},
Init:function (DialogTitle, IFRAMESRC, Iframewidth, Iframeheight, Isbottom, Isdrag)
{
var _px_shadow = 5;
var _px_top = 30;
var _px_bottom = 50;
if (!isbottom) {
_px_bottom = 0;
}
var _client_width = document.body.clientWidth;
var _client_height = document.documentElement.scrollHeight;
if (typeof ($ ("#jd_shadow") [0]) = = = "undefined")
{
$ ("Body"). Prepend ("<div id= ' Jd_shadow ' >&nbsp;</div>");
var _jd_shadow = $ ("#jd_shadow");
_jd_shadow.css ("width", _client_width + "px");
_jd_shadow.css ("height", _client_height + "px");
}
if (typeof ($ ("#jd_dialog") [0])! = "undefined")
{
$ ("#jd_dialog"). Remove ();
}
$ ("Body"). Prepend ("<div id= ' Jd_dialog ' ></div>");
var _jd_dialog = $ ("#jd_dialog");
_DRAGOBJS = _jd_dialog;
var _left = (_client_width-(iframewidth + jquerydialog.cbordersize * 2 + jquerydialog.cshdowright))/2;
_jd_dialog.css ("Left", (_left < 0? 0: _left) + document.documentElement.scrollLeft + "px");
var _top = (Document.documentElement.clientHeight-(iframeheight + jquerydialog.cbordersize * 2 + _px_top + _px_bottom + Jquerydialog.cshdowdown))/2;
_jd_dialog.css ("Top", (_top < 0 0: _top) + document.documentElement.scrollTop + "px");
_jd_dialog.append ("<div id= ' jd_dialog_s ' >&nbsp;</div>");
var _jd_dialog_s = $ ("#jd_dialog_s");
_jd_dialog_s.css ("width", Iframewidth + jquerydialog.cbordersize * 2 + "px");
_jd_dialog_s.css ("height", Iframeheight + jquerydialog.cbordersize * 2 + _px_top + _px_bottom + "px");
_jd_dialog_s.css ("left", Jquerydialog.cshdowright + "px");
_jd_dialog_s.css ("Top", Jquerydialog.cshdowdown + "px");
_jd_dialog.append ("<div id= ' jd_dialog_m ' ></div>");
var _jd_dialog_m = $ ("#jd_dialog_m");
_jd_dialog_m.css ("Border", Jquerydialog.cbordercolor + "+ jquerydialog.cbordersize +" px solid ");
_jd_dialog_m.css ("width", iframewidth + "px");
_jd_dialog_m.css ("Background-color", Jquerydialog.cbackgroundcolor);
_jd_dialog_m.append ("<div id= ' Jd_dialog_m_h ' ></div>");
var _jd_dialog_m_h = $ ("#jd_dialog_m_h");
_jd_dialog_m_h.css ("Background-color", Jquerydialog.cheaderbackgroundcolor);
_jd_dialog_m_h.append ("<span id= ' jd_dialog_m_h_l ' >" + dialogtitle + "</span>");
_jd_dialog_m_h.append ("<span id= ' jd_dialog_m_h_r ' title= '" + jquerydialog.cclosetitle + "' onclick= ' Jquerydialog.close (); ' > "+ jquerydialog.cclosetext +" </span> ");
_jd_dialog_m.append ("<div id= ' Jd_dialog_m_b ' ></div>"); var _jd_dialog_m_b = $ ("#jd_dialog_m_b");
_jd_dialog_m_b.css ("width", iframewidth + "px");
_jd_dialog_m_b.css ("height", iframeheight + "px");
_jd_dialog_m_b.append ("<div id= ' jd_dialog_m_b_1 ' >&nbsp;</div>");
var _jd_dialog_m_b_1 = $ ("#jd_dialog_m_b_1");
_jd_dialog_m_b_1.css ("Top", "30px");
_jd_dialog_m_b_1.css ("width", iframewidth + "px");
_jd_dialog_m_b_1.css ("height", iframeheight + "px");
_JD_DIALOG_M_B_1.CSS ("Display", "none");
_jd_dialog_m_b.append ("<div id= ' jd_dialog_m_b_2 ' ></div>");
$ ("#jd_dialog_m_b_2"). Append ("<iframe id= ' jd_iframe ' src= '" +iframesrc+ "' scrolling= ' no ' frameborder= ' 0 ' width= '" +iframewidth+ "' height= '" "+iframeheight+" '/> ");
if (Isbottom) {
_jd_dialog_m.append ("<div id= ' jd_dialog_m_t ' style= ' background-color:" +jquerydialog.cbottombackgroundcolor+ "; ' ></div> ");
var _jd_dialog_m_t = $ ("#jd_dialog_m_t");
_jd_dialog_m_t.append ("<span><input id= ' jd_submit ' value= '" +jquerydialog.csubmittext+ "' type= ' button ' Onclick= ' Jquerydialog.ok (); '/></span> ');
_jd_dialog_m_t.append ("<span class= ' jd_dialog_m_t_s ' ><input id= ' jd_cancel ' value= '" + jquerydialog.ccanceltext+ "' type= ' button ' onclick= ' Jquerydialog.close (); '/></span> ');
}
if (Isdrag) {
Draganddrop.register (_jd_dialog[0], _jd_dialog_m_h[0]);
}
$ ("#jd_iframe") [0].focus ();
},

Init2:function (Id_,dialogtitle, IFRAMESRC, Iframewidth, Iframeheight, Isbottom, Isdrag)
{
var _px_shadow = 5;
var _px_top = 30;
var _px_bottom = 50;
if (!isbottom) {
_px_bottom = 0;
}
var _client_width = document.body.clientWidth;
var _client_height = document.documentElement.scrollHeight;
/*if (typeof ($ ("#jd_shadow") [0]) = = "undefined")
{
$ ("Body"). Prepend ("<div id= ' Jd_shadow ' >&nbsp;</div>");
var _jd_shadow = $ ("#jd_shadow");
_jd_shadow.css ("width", _client_width + "px");
_jd_shadow.css ("height", _client_height + "px");
}*/
if (typeof ($ ("#" +id_) [0])! = "undefined")
{
$ ("#" +id_). Remove ();
}
$ ("Body"). Prepend ("<div id= '" +id_+ "' class= ' Jd_dialog ' ></div>");
var _jd_dialog = $ ("#" +id_);
_DRAGOBJS = _jd_dialog;
var _left = (_client_width-(iframewidth + jquerydialog.cbordersize * 2 + jquerydialog.cshdowright))/2;
_jd_dialog.css ("Left", (_left < 0? 0: _left) + document.documentElement.scrollLeft + "px");
var _top = (Document.documentElement.clientHeight-(iframeheight + jquerydialog.cbordersize * 2 + _px_top + _px_bottom + Jquerydialog.cshdowdown))/2;
_jd_dialog.css ("Top", (_top < 0 0: _top) + document.documentElement.scrollTop + "px");
_jd_dialog.append ("<div id=" + id_ + "_s ' class= ' jd_dialog_s ' >&nbsp;</div>");
var _jd_dialog_s = $ ("#" + id_ + "_s");
_jd_dialog_s.css ("width", Iframewidth + jquerydialog.cbordersize * 2 + "px");
_jd_dialog_s.css ("height", Iframeheight + jquerydialog.cbordersize * 2 + _px_top + _px_bottom + "px");
_jd_dialog_s.css ("left", Jquerydialog.cshdowright + "px");
_jd_dialog_s.css ("Top", Jquerydialog.cshdowdown + "px");
_jd_dialog.append ("<div id=" + id_ + "_m ' class= ' jd_dialog_m ' ></div>");
var _jd_dialog_m = $ ("#" + id_ + "_m");
_jd_dialog_m.css ("Border", Jquerydialog.cbordercolor + "+ jquerydialog.cbordersize +" px solid ");
_jd_dialog_m.css ("width", iframewidth + "px");
_jd_dialog_m.css ("Background-color", Jquerydialog.cbackgroundcolor);
_jd_dialog_m.append ("<div id=" + id_ + "_m_h ' class= ' Jd_dialog_m_h ' ></div>");
var _jd_dialog_m_h = $ ("#" + id_ + "_m_h");
_jd_dialog_m_h.css ("Background-color", Jquerydialog.cheaderbackgroundcolor);
_jd_dialog_m_h.append ("<span id=" + id_ + "_m_h_l ' class= ' jd_dialog_m_h_l ' >" + dialogtitle + "</span>");
_jd_dialog_m_h.append ("<span id=" + id_ + "_m_h_r ' class= ' jd_dialog_m_h_r ' title= '" + jquerydialog.cclosetitle
+ "' Onclick=jquerydialog.close ();>"
+ Jquerydialog.cclosetext + "</span>");
_jd_dialog_m.append ("<div id=" + id_ + "_m_b ' class= ' Jd_dialog_m_b ' ></div>");
var _jd_dialog_m_b = $ ("#" + id_ + "_m_b");
_jd_dialog_m_b.css ("width", iframewidth + "px");
_jd_dialog_m_b.css ("height", iframeheight + "px");
_jd_dialog_m_b.append ("<div id=" + id_ + "_m_b_1 ' class= ' jd_dialog_m_b_1 ' >&nbsp;</div>");
var _jd_dialog_m_b_1 = $ ("#" + id_ + "_m_b_1");
_jd_dialog_m_b_1.css ("Top", "30px");
_jd_dialog_m_b_1.css ("width", iframewidth + "px");
_jd_dialog_m_b_1.css ("height", iframeheight + "px");
_JD_DIALOG_M_B_1.CSS ("Display", "none");
_jd_dialog_m_b.append ("<div id=" + id_ + "_m_b_2 ' class= ' jd_dialog_m_b_2 ' ></div>");
var _jd_dialog_m_b_2 = $ ("#" + id_ + "_m_b_2");
$ (_jd_dialog_m_b_2). Append ("<iframe id= ' jd_iframe ' src= '" +iframesrc+ "' scrolling= ' no ' frameborder= ' 0 ' width= '" + iframewidth+ "' height= '" "+iframeheight+" '/> ");
if (Isbottom) {
_jd_dialog_m.append ("<div id=" + id_ + "_m_t ' class= ' jd_dialog_m_t ' style= ' background-color:" + Jquerydialog.cbottombackgroundcolor+ ";" ></div> ");
var _jd_dialog_m_t = $ ("#" + id_ + "_m_t");
_jd_dialog_m_t.append ("<span><input id= ' jd_submit ' value= '" +jquerydialog.csubmittext+ "' type= ' button ' Onclick= ' Jquerydialog.ok (); '/></span> ');
_jd_dialog_m_t.append ("<span class= ' jd_dialog_m_t_s ' ><input id= ' jd_cancel ' value= '" + jquerydialog.ccanceltext+ "' type= ' button ' onclick= ' Jquerydialog.close (); '/></span> ');
}
if (Isdrag) {
Draganddrop.register (_jd_dialog[0], _jd_dialog_m_h[0]);
}
if (typeof ($ ("#jd_iframe") [0])! = "undefined")
$ ("#jd_iframe") [0].focus ();
},
Close:function () {
if (typeof ($ ("#jd_shadow") [0])! = "undefined")
{
$ ("#jd_shadow"). Remove ();
}
Alert ($ (draganddrop.getobj ()). attr ("id"));
if (typeof (_dragobjs[0])! = "undefined")
{
if (typeof ($ ("#jd_iframe") [0])! = "undefined")
$ ("#jd_iframe") [0].SRC = "";
_dragobjs.remove ();
}
},
Close2:function (id_) {
if (typeof (_dragobjs[0])! = "undefined")
{
$ ("#jd_iframe") [0].SRC = "";
_dragobjs.remove ();
}
},
Ok:function () {
var frm = $ ("#jd_iframe");
Frm[0].contentwindow.ok ();
Frm[0].focus ();
},
Submitcompleted:function (Alertmsg, Isclosedialog, Isrefreshpage)
{
if ($.trim (alertmsg). length > 0)
{
alert (alertmsg);
}
if (Isclosedialog) {
Jquerydialog.close ();
}
if (isrefreshpage) {
Window.location.href = window.location.href;
}
},
Submitcompleted1:function (alertmsg, ParentURL)
{
if ($.trim (alertmsg). length > 0)
{
alert (alertmsg);
}
Jquerydialog.close ();
Window.location.href = ParentURL;
}
};
var draganddrop = function () {
var _clientwidth;
var _clientheight;
var _controlobj;
var _dragobj;
var _dragobjs;
var _mousedown = false;
var _dragobjcurrentlocation;
var _mouselastlocation;
var getelementdocument = function (Element)
{
return Element.ownerdocument | | Element.document;
};
var dragmousedownhandler = function (evt)
{
if (_dragobj)
{
EVT = EVT | | window.event;
_clientwidth = Document.body.clientwidth;_clientheight = Document.documentElement.scrollHeight;
$ ("#" + $ (_dragobj). attr ("id") + "_m_b_1"). CSS ("Display", "" ");
_mousedown = true;
_dragobjcurrentlocation = {x: $ (_dragobj). Offset (). Left,y: $ (_dragobj). Offset (). Top};
_mouselastlocation = {X:evt.screenx,y:evt.screeny};
$ (document). Bind ("MouseMove", Dragmousemovehandler);
$ (document). Bind ("MouseUp", Dragmouseuphandler);
if (Evt.preventdefault) {
Evt.preventdefault ();
}
else{
Evt.returnvalue = false;
}
}
};
var dragmousemovehandler = function (evt) {
if (_mousedown)
{
EVT = EVT | | window.event;
var _mousecurrentlocation = {X:evt.screenx,y:evt.screeny};
_dragobjcurrentlocation.x = _dragobjcurrentlocation.x + (_mousecurrentlocation.x-_mouselastlocation.x);
_DRAGOBJCURRENTLOCATION.Y = _dragobjcurrentlocation.y + (_MOUSECURRENTLOCATION.Y-_MOUSELASTLOCATION.Y);
_mouselastlocation = _mousecurrentlocation;
$ (_dragobj). CSS ("left", _dragobjcurrentlocation.x + "px");
$ (_dragobj). CSS ("top", _DRAGOBJCURRENTLOCATION.Y + "px");
if (Evt.preventdefault)
{
Evt.preventdefault ();
}
else{
Evt.returnvalue = false;
}
}
};
var dragmouseuphandler = function (evt)
{
if (_mousedown)
{
EVT = EVT | | window.event;
$ ("#jd_dialog_m_b_1"). CSS ("display", "none");
Cleanmousehandlers ();
_mousedown = false;
}
};
var cleanmousehandlers = function ()
{
if (_controlobj)
{
$ (_controlobj.document). Unbind ("MouseMove");
$ (_controlobj.document). Unbind ("MouseUp");
}
};
return {
Register:function (Dragobj, Controlobj)
{
_dragobj = dragobj;
_controlobj = Controlobj;
$ (_controlobj). bind ("MouseDown", Dragmousedownhandler);
},
Getobj:function ()
{
return _dragobj;
}
}
}();
-

Jquerydialog Non-modal Popup