JQuery UI Dialog Create friendly Dialog box implementation code

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 JSON or Array format:
{"OK": function () {}, "cancel": function (){}}
[{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:
'Center', 'left', 'right', 'top', 'bottom'
['Right', 'top'], using the preceding string combination (x, y)
[1, 350,100], absolute value (x, y)
5. minWidth: 150 by default, minimum width
6. minHeight: The default value is 150. The minimum height is.
Usage:
Copy codeThe Code is as follows:
$ ("..."). Dialog ({
Title: "title ",
//... More parameters
});

Main Method
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:
Copy codeThe Code is as follows:
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:

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:
Copy codeThe Code is as follows:
$ ("..."). 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:
Copy codeThe Code is as follows:
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 ):

In the close event, destroy
Set the dialog instance in alert/confirm to static
Use a single dialog instance for external calls
Demo program
The html code is as follows:
Copy codeThe 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:
Copy codeThe 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:
Copy codeThe Code is as follows:
$ ("# 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:
Copy codeThe Code is as follows:
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:
Copy codeThe Code is as follows:
// 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:
Copy codeThe Code is as follows: <telerik: RadButton... OnClientClicking = "radconfirm2 ('Are you sure you want to do this? ') "/>

End
For more information, see the jQuery UI Dialog official Demo: http://jqueryui.com/demos/dialog.
Foot home http://www.jb51.net/jiaoben/15574.html
This article demonstrates downloading lwme-jquery-ui-dialog-demo.7z
Author: jinyue
Source: http://lwme.cnblogs.com/