Javascript imitation pop-up confirmation dialog box

Such a general window ..

The Code is as follows:

Construct (){
Setting = {
ID: 'window id ',
TitleText :'',
Content: 'content text ',//
Parent: null, // The Window Parent handle is added to the body by default.
BoxCss: 'class03 _ tank ',
TitleCss: 'class03 _ tank_top ', // Title CSS
ContentCss: 'padtb10', // CSS
Width: 280,
Height: 'auto ',
Button: 'submit, cancel', // button type, submit: submit, cancel: cancel
Submitcall: null, // click the CALLBACK button
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> trim ({'left': opt. left, 'top': opt. top, 'z-Index': 1111, 'position': 'absolute '});
Parent. append (box)
Return $ ('#' + opt. ID );
}
Function _ setWindowConstruct (w, opt) {// create the internal structure of the form
W. subobj = w. obj;
// Create a 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'hangzhou.html ('× ')
). Append (
$ ('<Span>'). addClass ('disin _ bl lineh30 marl10'0000.html (opt. TitleText)
)
)
)
// Create content
W. subobj. append (
$ ('<Div>'). addClass ('class03 _ tank_con bgcfff'0000.css ({'text-align ': 'center'}). append (
$ ('<Div>'). attr ('id', 'content _ ui _ '+ opt. id). addClass (opt. ContentCss)
)
);
// Create the 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'hangzhou.html ('confirmed'). 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'0000.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 a covering layer
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": "block ",
"Opacity": 0.5,
'Z-Index': 10
})
);
}
Return function (opt ){
Opt = ST. extend (setting, opt );
// Create a 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 box
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, // additional button Parameters
Button: 'Sure, cancle ',
ButtonText: null, // additional text for the button
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.pageydomain(opt.layer.tar get). height ());
}

Var box = $ ('<div> 'hangzhou.addclass(opt.css).css ({'position': 'absolute', 'height': opt. height, 'width': opt. width, 'border': '1px solid # ccc ', 'z-Index': 100, '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> 'hangzhou.addclass(opt.buttoncss).css ({'position': 'abort', 'bottom': 0, 'width' :( opt. width-13 )})
If (opt. buttonCssRep! = Null)
P.css (opt. buttonCssRep );
If (ST. Base. inArray (btn, 'Sure ')>-1 ){
Var sure = $ ('<a> 'hangzhou.addclass('btnqx01'hangzhou.html ('confirmed'). 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'0000.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 have written two types here. There is also a dialog box without a title. There is only content.
Usage

The Code is as follows:

Var w = ST. UI. ModeWindow ({
'Id': 'window id ',
'Titletext': 'title ',
'Submitcall': function (){
// Confirmation button execution Method
},
'Cancelcall': function (){
// How to cancel button execution
},
'Width': 'width ',
'Height': 'high ',
'Boxcss ': 'form style ',//
'Titlecss ': 'title style ',
'Contentcss ': 'content style ',
'Button ': 'submit, cancel', // two buttons by default .. you can set one of them separately.
});

Optional.
W is the object of the form.
W. close (); // close the form
W. setContent ('content'); // sets the content
W. getObject (); // obtain the form object
W. load ('Load connection', 'callback function'); // load a url
The static dialog box is used in the same way as the modal dialog box.