JQueryUIDialog is a pop-up dialog box component of jQueryUI. It allows you to create various beautiful pop-up dialog boxes. It allows you to set the title and content of the dialog box, and enables the dialog box to be dragged and adjusted to a large value.
JQuery UI Dialog is the pop-up Dialog box component of jQueryUI. 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.
Common Parameters of jQuery UI Dialog include:
AutoOpen: The default value is true. The dialog box is displayed when the dialog method is created.
{"OK": function () {}, "cancel": function (){}}
[{Text: "OK", click: function () {}}, {text: "cancel", click: function () {}}]
Buttons: None by default. It is used to set the display button, which can be in the form of JSON and Array:
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.
Title: title
Draggable: Indicates whether manual access is allowed. The default value is true.
Resizable: whether to adjust the size. The default value is true.
Width: width, 300 by default
Height: height. The default value is "auto"
Other parameters that are not commonly used:
CloseOnEscape: The default value is true. Press esc to close the dialog box.
Show: displays the animation of the dialog box.
Hide: Close the animation effect of the dialog box
'Center', 'left', 'right', 'top', 'bottom'
['Right', 'top'], using the preceding string combination (x, y)
[1, 350,100], absolute value (x, y)
Position: The position displayed in the dialog box. The default value is "center". It can be set to a string or an array:
MinWidth: 150 by default, minimum width
MinHeight: 150 by default, minimum height
Usage:
$ ("..."). Dialog ({
Title: "title ",
//... More parameters
});
JQuery UI Dialog provides some methods to control the Dialog box, listing only common ones:
Open: open dialog box
Close: close the dialog box. (The close dialog box will not be destroyed. You can continue to use it)
Destroy: Destruction dialog box
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
JQuery UI Dialog provides some events, such as opening or closing the Dialog box to do some additional things:
Open: When open
Close: close
Create: at the time of creation
Resize: Hours
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 ();
}
});
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 =
''+
'
'+
''+ Text +
'
'+
'';
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 = $ (
''+
'
'+
''+ Text +
'
'+
'');
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 =
''+
'
'+
''+ Text +
'
'+
'';
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 =
''+
''+
'';
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 ):
In the close event, destroy
Set the dialog instance in alert/confirm to static
Use a single dialog instance for external calls
Demo program
Html
Corresponding js
$ (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 jQueryUI fonts are all 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.
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:
