Javascript jQuery UI 警报对话框作为 alert() 的替代品
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8079674/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Alert Dialog as a replacement for alert()
提问by mauzilla
I'm using alert()to output my validation errors back to the user as my design does not make provision for anything else, but I would rather use jQuery UI dialog as the alert dialog box for my message.
我使用alert()将我的验证错误输出回用户，因为我的设计没有为其他任何东西做准备，但我宁愿使用 jQuery UI 对话框作为我的消息的警报对话框。
Since errors are not contained in a (html) div, I am not sure how to go about doing this. Normally you would assign the dialog()to a div say $("#divName").dialog()but I more need a js function something like alert_dialog("Custom message here")or something similiar.
由于错误不包含在 (html) div 中，我不确定如何执行此操作。通常你会将 分配dialog()给一个 div 说，$("#divName").dialog()但我更需要一个类似alert_dialog("Custom message here")或类似的 js 函数。
Any ideas?
有任何想法吗？
回答by Clive
I don't think you even need to attach it to the DOM, this seems to work for me:
我认为您甚至不需要将它附加到 DOM，这似乎对我有用：
$("<div>Test message</div>").dialog();
Here's a JS fiddle:
这是一个 JS 小提琴：
回答by EkoJR
Using some of the info in here I ended up creating my own function to use.
使用这里的一些信息，我最终创建了自己的函数来使用。
Could be used as...
可以用作...
custom_alert();
custom_alert( 'Display Message' );
custom_alert( 'Display Message', 'Set Title' );
jQuery UI Alert Replacement
jQuery UI 警报替换
function custom_alert( message, title ) {
if ( !title )
title = 'Alert';
if ( !message )
message = 'No Message to Display.';
$('<div></div>').html( message ).dialog({
title: title,
resizable: false,
modal: true,
buttons: {
'Ok': function() {
$( this ).dialog( 'close' );
}
}
});
}
回答by SBerg413
Just throw an empty, hidden div onto your html page and give it an ID. Then you can use that for your jQuery UI dialog. You can populate the text just like you normally would with any jquery call.
只需将一个空的、隐藏的 div 扔到您的 html 页面上并为其指定一个 ID。然后你可以将它用于你的 jQuery UI 对话框。您可以像通常使用任何 jquery 调用一样填充文本。
回答by kofifus
Building on eidylon's answer, here's a version that will not show the title bar if TitleMsg is empty:
基于 eidylon 的回答，如果 TitleMsg 为空，这里的版本将不会显示标题栏：
function jqAlert(outputMsg, titleMsg, onCloseCallback) {
if (!outputMsg) return;
var div=$('<div></div>');
div.html(outputMsg).dialog({
title: titleMsg,
resizable: false,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
}
},
close: onCloseCallback
});
if (!titleMsg) div.siblings('.ui-dialog-titlebar').hide();
}
see jsfiddle
回答by datascript
As mentioned by nux and micheg79 a node is left behind in the DOM after the dialog closes.
正如 nux 和 micheg79 所提到的，在对话框关闭后，DOM 中会留下一个节点。
This can also be cleaned up simply by adding:
这也可以简单地通过添加来清理：
$(this).dialog('destroy').remove();
to the close method of the dialog. Example adding this line to eidylon's answer:
到对话框的关闭方法。将此行添加到 eidylon 的答案的示例：
function jqAlert(outputMsg, titleMsg, onCloseCallback) {
if (!titleMsg)
titleMsg = 'Alert';
if (!outputMsg)
outputMsg = 'No Message to Display.';
$("<div></div>").html(outputMsg).dialog({
title: titleMsg,
resizable: false,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
}
},
close: function() { onCloseCallback();
/* Cleanup node(s) from DOM */
$(this).dialog('destroy').remove();
}
});
}
EDIT: I had problems getting callback function to run and found that I had to add parentheses () to onCloseCallback to actually trigger the callback. This helped me understand why: In JavaScript, does it make a difference if I call a function with parentheses?
编辑：我在运行回调函数时遇到问题，发现我必须向 onCloseCallback 添加括号 () 才能实际触发回调。这帮助我理解了原因：在 JavaScript 中，如果我调用带括号的函数会有所不同吗？
回答by Dilusha Gonagala
DAlert jQuery UI PluginCheck this out, This may help you
DAlert jQuery UI 插件看看这个，这可能对你有帮助
回答by eidylon
I took @EkoJR's answer, and added an additional parameter to pass in with a callback function to occur when the user closes the dialog.
我接受了@EkoJR 的回答，并添加了一个额外的参数，以在用户关闭对话框时使用回调函数传入。
function jqAlert(outputMsg, titleMsg, onCloseCallback) {
if (!titleMsg)
titleMsg = 'Alert';
if (!outputMsg)
outputMsg = 'No Message to Display.';
$("<div></div>").html(outputMsg).dialog({
title: titleMsg,
resizable: false,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
}
},
close: onCloseCallback
});
}
You can then call it and pass it a function, that will occur when the user closes the dialog, as so:
然后，您可以调用它并传递一个函数，该函数将在用户关闭对话框时发生，如下所示：
jqAlert('Your payment maintenance has been saved.',
'Processing Complete',
function(){ window.location = 'search.aspx' })
回答by micheg79
Use this code syntax.
使用此代码语法。
$("<div></div>").html("YOUR MESSAGE").dialog();
this works but it append a node to the DOM. You can use a class and then or first remove all elements with that class. ex:
这有效，但它向 DOM 附加了一个节点。您可以使用一个类，然后或首先删除该类的所有元素。前任：
function simple_alert(msg)
{
$('div.simple_alert').remove();
$('<div></div>').html(is_valid.msg).dialog({dialogClass:'simple_alert'});
}
回答by Chris
There is an issue that if you close the dialog it will execute the onCloseCallback function. This is a better design.
有一个问题，如果您关闭对话框，它将执行 onCloseCallback 函数。这是一个更好的设计。
function jAlert2(outputMsg, titleMsg, onCloseCallback) {
if (!titleMsg)
titleMsg = 'Alert';
if (!outputMsg)
outputMsg = 'No Message to Display.';
$("<div></div>").html(outputMsg).dialog({
title: titleMsg,
resizable: false,
modal: true,
buttons: {
"OK": onCloseCallback,
"Cancel": function() {
$( this ).dialog( "destroy" );
}
},
});
