jQuery UI Dialog creates a friendly pop-up dialog box implementation code_jquery

Main parameters
Commonly used parameters of jQuery UI Dialog are:

1. autoOpen: default true, that is, the dialog box will be displayed when the dialog method is created
2. buttons: none by default, used to set the buttons to be displayed , can be in JSON or Array format:
{"OK": function(){}, "Cancel": function(){}}
[{text: "OK", click: function(){} },{text:"Cancel",click:function(){}}]
3. modal: Default false, whether the dialog box is modal. If set to true, a mask layer will be created to cover other elements of the page. Live
4. title: title
5. draggable: whether it can be done manually, default true
6. resizable: whether it can be resized, default true
7. width: width, default 300
8. height: height, default "auto"
Other less commonly used parameters:

1. closeOnEscape: default true, press the esc key to close the dialog box
2. show: open the dialog box animation effect
3. hide: the animation effect of closing the dialog box
4. position: the position where the dialog box is displayed, the default is "center", and can be set to a string or array:
'center', ' left', 'right', 'top', 'bottom'
['right','top'], through the above string combination (x, y)
[350,100], absolute numerical value (x,y)
5. minWidth: Default 150, minimum width
6. minHeight: Default 150, minimum height
Usage:

Copy the code The code is as follows:

$("...").dialog({
title: "Title",
//. ..More parameters
});

Main method
jQuery UI Dialog provides some methods to control the dialog box, only the commonly used ones are listed:

open : Open the dialog box
close: Close the dialog box (it will not be destroyed by close and can continue to be used)
destroy: Destroy the dialog box
option: Set parameters, that is, the parameters listed previously
Use When used as a parameter of the dialog method:

Copy code The 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

Main events
jQuery UI Dialog provides some events, such as opening and closing the dialog box do some extra things:

open: when opening
close: when closing
create: when creating
resize: when resizing
drag: when dragging
The usage method is the same as the parameter usage, such as hiding the close button when opening:

Copy the code The code is as follows:

$("...").dialog({
//...Various parameters
open: function(event, ui) {
$(".ui-dialog -titlebar-close", $(this).parent()).hide();
}
});

Specific use
The following encapsulates some commonly used Prompt information, no further explanation:

Copy code The code is as follows:

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 pops up and closes automatically 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); // Clear timer when time is up
}
}, 1000);
},
title: title || "Prompt message",
buttons: {
" OK": function() {
var dlg = $(this).dialog("close");
fn && fn.call(dlg);
window.clearInterval(this.timer); / / Clear timer
}
},
close: function() {
window.clearInterval(this.timer); // Clear timer
}
});
},
// jQuery UI confirm pops up the 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) ;
}
}
});
},
// jQuery UI pops up iframe window
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"); // Destroyed when closing
}
}, options));
},
// jQuery UI confirm prompt
confirm: function(evt , text, title) {
evt = $.event.fix(evt);
var me = evt.target;
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;
}
});

There is another one in the above code The problem is that the pop-up box is not destroyed every time it is closed.

The solution is (no specific demonstration):

Destroy in the close event
Set the dialog instance in the alert/confirm provider to static
Use a single when calling externally dialog instance
Demo program
html code is as follows:

Copy code The code is as follows:

The corresponding js code is as follows:

Copy code The code is as follows:

$(function () {
$("#button1").click(function() {
$.jqalert("This is a normal prompt!");
});
$("#button2 ").click(function() {
$.jqtimeralert("This is an automatic closing prompt!", "Automatic closing prompt",
function() {
$.jqalert("Time is up" );
});
});
$("#button3").click(function() {
$.jqconfirm("Are you sure you want to do this?", "Confirmation prompt ",
function() {
$.jqalert("Click OK");
},
function() {
$.jqalert("Click Cancel");
});
});
$("#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 });
});
});

For server To use confirm on the end control, you may need the following method:

Copy code The code is as follows:

$( "#button4").click(function(e) {
if (!$.confirm(e, "Are you sure you want to do this?" ")) {
e.stopPropagation();
return false;
}
});

In addition, the fonts used by jQuery UI are The unit is em, which may cause the dialog to become larger during normal use. You can additionally set the following styles:

Copy code Code 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 the dialog will look normal .
Using
in Telerik RadControls for asp.net ajax is mainly for telerik RadButton control, defining the following two functions:

Copy code The code is as follows:

// Used for RadButton’s confirm confirmation callback, which triggers button click
function radcallback(s) {
return Function.createDelegate(s , function(argument) {
if (argument) {
this.click();
}
});
}
// Used to 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 code The code is as follows:

End
For more information, please see the jQuery UI Dialog official demo: http://jqueryui.com/demos/dialog.
Script Home download addresshttp://www.jb51.net/jiaoben/15574.html
Download the demo of this articlelwme-jquery-ui-dialog-demo.7z
Author: 囧月
Source: http://lwme.cnblogs.com/