Such a universal window.
The code is as follows
construct () {
setting={
ID: ' Window ID ',
titletext: ",
content: ' Content Text ',//
parent:null,//window's parent handle is added to the body by default
boxcss: ' Class03_tank ',
titlecss: ' Class03_tank_top ',//title CSS
contentcss: ' PADTB10 ',//content CSS
width:280,
height: ' Auto ',
button: ' Submit,cancel ',//button type, submit: Commit, Cancel: Cancel
submitcall:null,//Click OK button callback
cancelcall:null//Click the Cancel button callback
}
function _createwindow (opt) {
var windowid=opt.id,top,left;
if (windowid==null)
return null;
if ($ (' # ' +opt.id). length>0) {
$ (' # ' +opt.id). Remove ();
}
if (!opt.left)
opt.left= ($ (window). Width ()-opt.width)/2;
if (!opt.top)
Opt.top = ($ (window). Height ())/3+$ (document). ScrollTop ()
var parent= (opt. Parent==null | | opt.parent.length==0)? $ (' Body '): $ (opt. Parent);
var box=$ (' <div> '). attr (' id ', windowid). addclass (OPT.BOXCSS). Width (opt.width). Height (opt.height). CSS ({ ' Left ': opt.left, ' top ': opt.top, ' z-index ': 1111, ' position ': ' absolute '};
parent.append (Box)
return $ (' # ' +opt.id);
}
function _setwindowconstruct (w,opt) {//Create form internal structure
W.subobj=w.obj;
//Create title
w.subobj.append ($ (' <div> '). addclass (' Class03_tank_top '). Append (
$ (' <div> '). addclass (' Class03_tank_topc '). Append (
w.close=$ (' <a> '). attr (' title ', ' Close '). AddClass (' Btnax fr bgcfff mart04 '). html (' x ')
). Append (
$ (' <span> '). addclass (' Disin_bl lineh30 marl10 '). html (OPT. TitleText)
)
)
)
//create content
W.subobj.append (
$ (' <div> '). addclass (' Class03_tank_con bgcfff '). css ({' text-align ': ' Center '}). Append (
$ (' <div> '). attr (' id ', ' content_ui_ ' +opt.id). addclass (opt. CONTENTCSS)
)
);
//Create bottom
w.subobj.append (' <div class= ' "style=" margin-top:0; " ><b class= "yz_b01" ></b><b class= "yz_b02" ></b><b class= "yz_b03 yz_b00" ></b> </div> ')
Return w;
}
function _setwindowsubmitbutton (w,opt) {//Set button
var p=$ (' <p> '). addclass (' class03_tank_p ');
var submit=$ (' <a> '), cancel=$ (' <a> ');
btn=opt.button.split (', ');
if (ST. Base.inarray (BTN, ' submit ') >-1) {
p.append (Submit.addclass (' btnqx01 '). html (' OK '). bind (' click ', Function () {
if ((Opt.submitcall&&opt.submitcall ()!==false) | | Opt.submitcall==null) {
$ (' # ' +opt.id). Remove ();
$ (' #MW_BACKOVER '). Hide ();
}
if (ST. Ui.timeid!=null)
Window.cleartimeout (ST. Ui.timeid);
}))
}
if (ST. Base.inarray (btn, ' Cancel ') >-1) {
P.append (Cancel.addclass (' btnqx01 marlr06 '). HTML (' Close '). Bind (' click ', function () {
if ((Opt.cancelcall&&opt.cancelcall ()!==false) | | Opt.cancelcall==null) {
$ (' # ' +opt.id). Remove ();
$ (' #MW_BACKOVER '). Hide ();
}
if (ST. Ui.timeid!=null)
Window.cleartimeout (ST. Ui.timeid);
})
W.close.bind (' click ', Function () {
$ (' # ' +opt.id). Remove ();
$ (' #MW_BACKOVER '). Hide ();
})
W.obj.children ('. Class03_tank_con '). Append (P)
}
Function _setbackover (w) { //Create Mask
if ($ (' #MW_ Backover '). length>0 {
$ (' #MW_BACKOVER '). Show ();
return;
}
$ ("Body"). Append (
$ ("<div>")
. attr ("id", "mw_backover")
. CSS ({
"Background-color": "#ddd",
Position: fixed,
Top: ' 0 ',
Left: ' 0 ',
' width ': ' 100% ',
' height ': ' 100% ',
' display ': ' Bloc K ",
Opacity: 0.5,
' Z-index ': Ten
})
";
}
return function (opt) {
Opt=st.extend (setting,opt);
//Create form container object
Var w=_createwindow (opt);
if (!w) {
return false;
}
windowobj={' obj ': w, ' subobj ': null};
Windowobj=_setwindowconstruct (windowobj,opt);
_setbackover ( windowobj,opt)
_setwindowsubmitbutton (windowobj,opt);
Return {
Getobject:function () {
return Windowobj;
},
Close:function () {
$ (windowobj[' obj ']). Remove ();
$ (' #MW_BACKOVER '). Hide ();
return this;
},
Setcontent:function (content) {
$ (' #content_ui_ ' +opt.id). HTML (content);
return this;
},
Load:function (url,callback) {
$ (' #content_ui_ ' +opt.id). Load (url+ ' &r= ' +math.random (), callback);
Return this;
}
}
}
Return function (option) {
Controller=construct (),
return Controller (option)
}
}) (),
//Static dialog
Staticwindow: (function () {
var controller=null;
function _construct (opt) {
setting={
ID: ',
left:0,
top:0,
width:200,
height:100,
CSS: ' Bgcfff ',
Parent: ',
Buttoncss: ' class03_tank_p ',
buttoncssrep:null, //button Additional parameters
Button: ' sure,cancle ',
Buttontext:null, //button Append text
Layer:null
}
Function _createwindow (opt) {
if ($ (' # ' +opt.id). length>0)
$ (' # ' +opt . ID). Remove ();
if (opt.layer!=null) {
opt.left= (Opt.layer.pageX);
opt.top= (opt.layer.pagey+$ (opt.layer.target). Height ());
}
Var box=$ (' <div> '). addclass (OPT.CSS). css ({' position ': ' absolute ', ' height ': opt.height, ' width ': opt.width, ' Border ': ' 1px solid #ccc ', ' z-index ': +, ' Left ': opt.left, ' top ': opt.top}. attr (' id ', opt.id),
parent=opt.parent! = '? $ (opt.parent): $ (' body ');
Parent.append (box);
Return $ (' # ' +opt.id);
};
Function _setwindowconstruct (obj,opt) {
obj.html (')
Obj.append (' <div> '). attr (' id ', ' static_ Content_ ' +opt.id) '
}
Function _setbutton (obj,opt) {
Btn=opt.button.split (', ');
p=$ (' <p> '). AddClass (OPT.BUTTONCSS). css ({' position ': ' absolute ', ' bottom ': 0, ' width ':(opt.width-13)})
if (opt.buttoncssrep! =null)
P.css (opt.buttoncssrep);
if (ST. Base.inarray (btn, ' sure ') >-1) {
var sure=$ (' <a> '). addclass (' btnqx01 '). HTML (' confirmation '). Click (function (e) {
if (OPT.SUREBTN&&OPT.SUREBTN (e)!==false) | | Opt.surebtn==null) {
Obj.remove ();
}
})
P.append (sure)
}
if (ST. Base.inarray (btn, ' cancle ') >-1) {
cancel=$ (' <a> ').AddClass (' btnqx01 marlr06 '). html (' Cancel '). Click (function (e) {
if (opt.cancelbtn&&opt.cancelbtn (e)!== False) | | Opt.cancelbtn==null) {
Obj.remove ();
}
})
P.append (cancel);
}
if (opt.buttontext!=null)
P.append (opt.buttontext)
Obj.append (p)
}
return function (opt) {
Opt=st.extend (setting,opt);
var w=_createwindow (opt);
if (!w) return false;
_setwindowconstruct (w,opt);
_setbutton (w,opt);
return{
Close:function () {
W.remove ()
},
Setcontent:function (content) {
$ (' #static_content_ ' +opt.id). HTML (content);
},
Append:function (obj) {
$ (' #static_content_ ' +opt.id). append (obj);
},
Load:function (Url,callback) {
$ (' #static_content_ ' +opt.id). Load (Url,callback)
}
}
}
}
return function (option) {
Controller=_construct ();
return Controller (option);
}
})()
}
}
I've written two of them here. There is also the absence of a title. Only the Content dialog box.
How to use
The code is as follows
var w=st. Ui. Modewindow ({
' ID ': ' Window ID ',
' TitleText ': ' title ',
' Submitcall ': function () {
Confirm how the button executes
},
' Cancelcall ': function () {
How to cancel a button execution
},
' Width ': ' Width ',
' Height ': ' High ',
' Boxcss ': ' Form style ',//
' Titlecss ': ' Heading style ',
' Contentcss ': ' Content style ',
' button ': ' Submit,cancel ',//Default two buttons. One of these can be set individually
});
Parameters are optional.
W is the object of the form.
W.close ()//close form
W.setcontent (' content ');/set Content
W.getobject ()//Get Form Object
W.load (' Load connection ', ' callback function ');//Load a URL
The static dialog box uses the same method as the modal dialog box.