Create a friendly Dialog box for jQuery UI Dialog

JQuery UI Dialog is a component of the jQuery UI pop-up Dialog box. It can be used to create various beautiful pop-up Dialog boxes. It can be used to set the title and content of the Dialog box, in addition, the dialog box can be dragged, resized, and closed. It is usually used to replace alert, confirm, and open methods that come with browsing.
Main Parameters
Common Parameters of jQuery UI Dialog include:
1. autoOpen: The default value is true. The dialog box is displayed when the dialog method is created.
2. buttons: None by default. It is used to set the display button, which can be in the form of JSON or Array:
1. {"OK": function () {}, "cancel": function (){}}
2. [{text: "OK", click: function () {}}, {text: "cancel", click: function () {}}]
3. modal: The default value is false. Whether the modal dialog box is displayed. If it is set to true, a mask layer is created to hide other elements on the page.
4. title: title
5. draggable: Indicates whether manual access is allowed. The default value is true.
6. resizable: whether to adjust the size. The default value is true.
7. width: width, 300 by default
8. height: height. The default value is "auto"
Other parameters that are not commonly used:
1. closeOnEscape: The default value is true. Press esc to close the dialog box.
2. show: displays the animation effect of the dialog box.
3. hide: Close the animation effect of the dialog box
4. position: the position displayed in the dialog box. The default value is "center", which can be set to a string or array:
1. 'center', 'left', 'right', 'top', 'bottom'
2. ['right', 'top'], which is combined by the preceding strings (x, y)
3. [1, 350,100], absolute value (x, y)
5. minWidth: 150 by default, minimum width
6. minHeight: 150 by default, minimum height
Usage:
$ ("..."). Dialog ({
Title: "title ",
//... More parameters
});
Main Method
JQuery UI Dialog provides some methods to control the Dialog box, listing only common ones:
1. open: open dialog box
2. close: close the dialog box (the close dialog box will not be destroyed and can be used again)
3. destroy: Destruction dialog box
4. option: set parameters, that is, the parameters listed above
Used as a parameter of the dialog method:
Var dlg = $ ("..."). dialog ({
// Various parameters...
});
Dlg. dialog ("option", {title: "title"}); // set parameters
Dlg. dialog ("open"); // use the open method to open the dialog box
Major Events
JQuery UI Dialog provides some events, such as opening or closing the Dialog box to do some additional things:
1. open: open
2. close: close
3. create: at the time of creation
4. resize: hour adjustment
5. drag: when dragging
The usage method is the same as that of the parameter. For example, hide the close button when opening:
$ ("..."). Dialog ({
// Various parameters...
Open: function (event, ui ){
$ (". Ui-dialog-titlebar-close", $ (this). parent (). hide ();
}
});
Usage
Some common prompts are encapsulated below, which are not described in detail:

JQuery. extend (jQuery ,{
// JQuery UI alert pop-up prompt
Jqalert: function (text, title, fn ){
Var html =
'<Div class = "dialog" id = "dialog-message">' +
'<P>' +
'<Span class = "ui-icon-circle-check" style = "float: left; margin: 0 7px 0 0; "> </span> '+ text +
'</P>' +
'</Div> ';
Return $ (html). dialog ({
// AutoOpen: false,
Resizable: false,
Modal: true,
Show :{
Effect: 'fade ',
Duration: 300
},
Title: title | "prompt message ",
Buttons :{
"OK": function (){
Var dlg = $ (this). dialog ("close ");
Fn & fn. call (dlg );
}
}
});
},
// JQuery UI alert pop-up prompt, which is automatically closed after a certain interval
Jqtimeralert: function (text, title, fn, timerMax ){
Var dd = $ (
'<Div class = "dialog" id = "dialog-message">' +
'<P>' +
'<Span class = "ui-icon-circle-check" style = "float: left; margin: 0 7px 0 0; "> </span> '+ text +
'</P>' +
'</Div> ');
Dd [0]. timerMax = timerMax | 3;
Return dd. dialog ({
// AutoOpen: false,
Resizable: false,
Modal: true,
Show :{
Effect: 'fade ',
Duration: 300
},
Open: function (e, ui ){
Var me = this,
Dlg = $ (this ),
Btn = dlg. parent (). find (". ui-button-text"). text ("OK (" + me. timerMax + ")");
-- Me. timerMax;
Me. timer = window. setInterval (function (){
Btn. text ("OK (" + me. timerMax + ")");
If (me. timerMax -- <= 0 ){
Dlg. dialog ("close ");
Fn & fn. call (dlg );
Window. clearInterval (me. timer); // The time reaches the time when the timer is cleared.
}
},1000 );
},
Title: title | "prompt message ",
Buttons :{
"OK": function (){
Var dlg = $ (this). dialog ("close ");
Fn & fn. call (dlg );
Window. clearInterval (this. timer); // clear the timer
}
},
Close: function (){
Window. clearInterval (this. timer); // clear the timer
}
});
},
// JQuery UI confirm pop-up confirmation prompt
Jqconfirm: function (text, title, fn1, fn2 ){
Var html =
'<Div class = "dialog" id = "dialog-confirm">' +
'<P>' +
'<Span class = "ui-icon-alert" style = "float: left; margin: 0 7px 20px 0;"> </span>' + text +
'</P>' +
'</Div> ';
Return $ (html). dialog ({
// AutoOpen: false,
Resizable: false,
Modal: true,
Show :{
Effect: 'fade ',
Duration: 300
},
Title: title | "prompt message ",
Buttons :{
"OK": function (){
Var dlg = $ (this). dialog ("close ");
Fn1 & fn1.call (dlg, true );
},
"Cancel": function (){
Var dlg = $ (this). dialog ("close ");
Fn2 & fn2 (dlg, false );
}
}
});
},
// The iframe window is displayed in jQuery UI.
Jqopen: function (url, options ){
Var html =
'<Div class = "dialog" id = "dialog-window" title = "prompt message">' +
'<Iframe src = "' + url + '" frameBorder = "0" style = "border: 0; "scrolling =" auto "width =" 100% "height =" 100% "> </iframe> '+
'</Div> ';
Return $ (html). dialog ($. extend ({
Modal: true,
CloseOnEscape: false,
Draggable: false,
Resizable: false,
Close: function (event, ui ){
$ (This). dialog ("destroy"); // destroy when disabled
}
}, Options ));
},
// JQuery UI confirm prompt
Confirm: function (evt, text, title ){
Evt = $. event. fix (evt );
Var me = evt.tar get;
If (me. confirmResult ){
Me. confirmResult = false;
Return true;
}
JQuery. jqconfirm (text, title, function (e ){
Me. confirmResult = true;
If (e ){
If (me. href & $. trim (me. href). indexOf ("javascript:") = 0 ){
$. GlobalEval (me. href );
Me. confirmResult = false;
Return;
}
Var t = me. type & me. type. toLowerCase ();
If (t & me. name & (t = "image" | t = "submit" | t = "button ")){
_ DoPostBack (me. name ,"");
Me. confirmResult = false;
Return;
}
If (me. click) me. click (evt );
}
Return false;
});
Return false;
}
});
The above code still has a problem, that is, it is not destroyed after the pop-up box is closed.
Solution ):
1. destroy in the close event
2. Set the dialog instance in alert/confirm to static
3. Use a single dialog instance for external calls
Demo program
The html code is as follows:
<Div>
<Input type = "button" id = "button1" value = "normal prompt"/>
<Input type = "button" id = "button2" value = "auto-close prompt"/>
<Input type = "button" id = "button3" value = "OK"/>
<Input type = "button" id = "button4" value = "OK 2"/>
<Input type = "button" id = "button5" value = "open window"/>
</Div>
The js Code is as follows:

$ (Function (){
$ ("# Button1"). click (function (){
$. Jqalert ("this is a normal prompt! ");
});
$ ("# Button2"). click (function (){
$. Jqtimeralert ("this is an automatic shutdown prompt! "," Auto-close prompt ",
Function (){
$. Jqalert ("time ");
});
});
$ ("# Button3"). click (function (){
$. Jqconfirm ("are you sure you want to do this? "," Confirmation prompt ",
Function (){
$. Jqalert ("Click OK ");
},
Function (){
$. Jqalert ("canceled ");
});
});
$ ("# Button4"). click (function (e ){
If ($. confirm (e, "Are you sure you want to do this? "))
$. Jqalert ("Click OK ");
});
$ ("# Button5"). click (function (e ){
$. Jqopen ("http://lwme.cnblogs.com/", {title: "My blog", width: 700, height: 500 });
});
});
To use confirm for a server-side control, you may need the following methods:
$ ("# Button4"). click (function (e ){
If (! $. Confirm (e, "Are you sure you want to do this? ")){
E. stopPropagation ();
Return false;
}
});
Additionally, the fonts used by jQuery UI are in em units, which may increase the size of the dialog during normal use. You can set the following styles:

Body {font-size: 12px;} // default font size
/* JQuery UI fakes */
. Ui-widget {font-size: 1em ;}
. Ui-dialog. ui-dialog-buttonpane {padding-top:. 1em; padding-bottom:. 1em ;}
In this way, the size of dialog looks normal.
Use Telerik RadControls for asp.net ajax
Mainly for the telerik RadButton control, the following two functions are defined:

// The confirm confirmation callback for the RadButton, that is, the trigger button is clicked.
Function radcallback (s ){
Return Function. createDelegate (s, function (argument ){
If (argument ){
This. click ();
}
});
}
// Add a confirm prompt for RadButton
Function radconfirm2 (textOrFn, title, callback ){
Return function (s, e ){
$. Jqconfirm (textOrFn, title, callback | radcallback (s ));
// Radconfirm (textOrFn, callback, 280, 50, null, title );
E. set_cancel (true );
};
}
Then you can use it like this:
?
1 <telerik: RadButton... OnClientClicking = "radconfirm2 ('Are you sure you want to do this? ') "/>

From the month of renewal