脚本宝典收集整理的这篇文章主要介绍了js實例教程-jQuery UI Dialog 創建友好的彈出對話框實現代碼，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小寶典致力於為廣大程序猿（媛）提供高品質的代碼服務，請大家多多光顧小站，小寶典在此謝過。

主要參數
jQuery UI Dialog常用的參數有：

1、autoOpen：默認true，即dialog方法創建就顯示對話框
2、buttons：默認無，用於設置顯示的按鈕，可以是JSON和Array形式:
{"確定":function(){},"取消":function(){}}
[{text:"確定", click: function(){}},{text:"取消",click:function(){}}]
3、modal：默認false，是否模態對話框，如果設置為true則會創建一個遮罩層把頁面其他元素遮住
4、title：標題
5、draggable：是否可手動，默認true
6、resizable：是否可調整大小，默認true
7、width：寬度，默認300
8、height：高度，默認"auto"
其他一些不太常用的參數：

1、closeOnEscape：默認true，按esc鍵關閉對話框
2、show：打開對話框的動畫效果
3、hide：關閉對話框的動畫效果
4、position：對話框顯示的位置，默認"center"，可以設置成字符串或數組：
'center', 'left', 'right', 'top', 'bottom'
['right','top']，通過上面的幾個字符串組合(x,y)
[350,100]，絕對的數值(x,y)
5、minWidth：默認150，最小寬度
6、minHeight：默認150，最小高度
使用方法：

. 代碼如下:

$("...").dialog({
title: "標題",
//...更多參數
});

主要方法
jQuery UI Dialog提供了一些方法來控制對話框，僅列出常用的：

open：打開對話框
close：關閉對話框（通過close不會銷毀，還能繼續使用）
destroy：銷毀對話框
option：設置參數，即前面列出的參數
使用的時候作為dialog方法的參數：

. 代碼如下:

var dlg = $("...").dialog({
//...各種參數
});
dlg.dialog("option", { title: "標題" }); // 設置參數
dlg.dialog("open"); // 使用open方法打開對話框

主要事件
jQuery UI Dialog提供了一些事件，比如打開、關閉對話框的時候做一些額外的事情：

open：打開時
close：關閉時
create：創建時
resize：調整大小時
drag：拖動時
使用方法同參數的使用方法，比如在打開時隱藏關閉按鈕：

. 代碼如下:

$("...").dialog({
//...各種參數
open: function(event, ui) {
$(".ui-dialog-titlebar-close", $(this).parent()).hide();
}
});

具體使用
以下封裝了一些常用的提示信息，不再詳細解釋：

. 代碼如下:

jQuery.extend(jQuery, {
// jQuery UI alert彈出提示
jqalert: function(text, title, fn) {
var html =
'<p class="dialog" id="dialog-message">' +
' <p>' +
' <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 0 0;"></span>' + text +
' </p>' +
'</p>';
return $(html).dialog({
//autoOpen: false,
resizable: false,
modal: true,
show: {
effect: 'fade',
duration: 300
},
title: title || "提示信息",
buttons: {
"確定": function() {
var dlg = $(this).dialog("close");
fn && fn.call(dlg);
}
}
});
},
// jQuery UI alert彈出提示,一定間隔之後自動關閉
jqtimeralert: function(text, title, fn, timerMax) {
var dd = $(
'<p class="dialog" id="dialog-message">' +
' <p>' +
' <span class="ui-icon ui-icon-circle-check" style="float: left; margin: 0 7px 0 0;"></span>' + text +
' </p>' +
'</p>');
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("確定(" + me.timerMax + ")");
--me.timerMax;
me.timer = window.setInterval(function() {
btn.text("確定(" + me.timerMax + ")");
if (me.timerMax-- <= 0) {
dlg.dialog("close");
fn && fn.call(dlg);
window.clearInterval(me.timer); // 時間到了清除計時器
}
}, 1000);
},
title: title || "提示信息",
buttons: {
"確定": function() {
var dlg = $(this).dialog("close");
fn && fn.call(dlg);
window.clearInterval(this.timer); // 清除計時器
}
},
close: function() {
window.clearInterval(this.timer); // 清除計時器
}
});
},
// jQuery UI confirm彈出確認提示
jqconfirm: function(text, title, fn1, fn2) {
var html =
'<p class="dialog" id="dialog-confirm">' +
' <p>' +
' <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>' + text +
' </p>' +
'</p>';
return $(html).dialog({
//autoOpen: false,
resizable: false,
modal: true,
show: {
effect: 'fade',
duration: 300
},
title: title || "提示信息",
buttons: {
"確定": function() {
var dlg = $(this).dialog("close");
fn1 && fn1.call(dlg, true);
},
"取消": function() {
var dlg = $(this).dialog("close");
fn2 && fn2(dlg, false);
}
}
});
},
// jQuery UI 彈出iframe窗口
jqopen: function(url, options) {
var html =
'<p class="dialog" id="dialog-window" title="提示信息">' +
' <iframe src="' + url + '" frameBorder="0" style="border: 0; " scrolling="auto" width="100%" height="100%"></iframe>' +
'</p>';
return $(html).dialog($.extend({
modal: true,
closeOnEscape: false,
draggable: false,
resizable: false,
close: function(event, ui) {
$(this).dialog("destroy"); // 關閉時銷毀
}
}, options));
},
// jQuery UI confirm提示
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;
}
});

以上代碼還存在一個問題，就是每次彈出框關閉之後都沒有銷毀。

解決辦法有（具體不演示）：

在close事件裡面destroy
把alert/confirm提供里的dialog實例設置成靜態的
在外部調用使用單個dialog實例
演示程序
html代碼如下：

. 代碼如下:

<p>
<input type="button" id="button1" value="普通提示" />
<input type="button" id="button2" value="自動關閉提示" />
<input type="button" id="button3" value="確認提示" />
<input type="button" id="button4" value="確認提示2" />
<input type="button" id="button5" value="打開窗口" />
</p>

相應js代碼如下：

. 代碼如下:

$(function() {
$("#button1").click(function() {
$.jqalert("這是普通提示！");
});
$("#button2").click(function() {
$.jqtimeralert("這是自動關閉的提示！", "自動關閉提示",
function() {
$.jqalert("時間到");
});
});
$("#button3").click(function() {
$.jqconfirm("確定要這麼做嗎？", "確認提示",
function() {
$.jqalert("點了確定");
},
function() {
$.jqalert("點了取消");
});
});
$("#button4").click(function(e) {
if ($.confirm(e, "確定要這麼做嗎？"))
$.jqalert("點了確定");
});
$("#button5").click(function(e) {
$.jqopen("https://lwme.cnblogs.com/", { title: "我的博客", width: 700, height: 500 });
});
});

對於服務器端控件使用confirm，可能需要如下方法：

. 代碼如下:

$("#button4").click(function(e) {
if (!$.confirm(e, "確定要這麼做嗎？")) {
e.stopPRopagation();
return false;
}
});

額外再提一下，jQuery UI使用的字體都是以em為單位，可能會導致平常使用時dialog變得比較大，可以額外設置以下樣式：

. 代碼如下:

body { font-size: 12px; } // 默認字體大小
/*jQuery UI fakes*/
.ui-widget { font-size: 1em; }
.ui-dialog .ui-dialog-buttonpane { padding-top: .1em; padding-bottom: .1em; }

這樣子，dialog的大小看起來就比較正常了。
在Telerik RadControls for asp.net ajax中使用
主要是針對telerik RadButton控件，定義如下兩個函數：

. 代碼如下:

// 用於RadButton的confirm確認回調，即觸發按鈕點擊
function radcallback(s) {
return Function.createDelegate(s, function(argument) {
if (argument) {
this.click();
}
});
}
// 用於為RadButton添加confirm提示
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);
};
}

然後可以這樣使用：

. 代碼如下:

<telerik:RadButton ... OnClientClicking="radconfirm2('確定要這麼做嗎?')" />

覺得可用，就經常來吧！Javascript技巧 腳本寶典 歡迎評論哦！ js技巧，巧奪天工，精雕玉琢。小寶典獻醜了！

脚本宝典总结

以上是脚本宝典为你收集整理的js實例教程-jQuery UI Dialog 創建友好的彈出對話框實現代碼全部内容，希望文章能够帮你解决js實例教程-jQuery UI Dialog 創建友好的彈出對話框實現代碼所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。