jQuery UI Alert对话框作为alert（）的替代品

我正在使用alert()将我的validation错误输出回用户，因为我的设计没有提供其他任何内容，但我宁愿使用jQuery UI对话框作为我的消息的警告对话框。

由于错误不包含在（html）div中，我不知道该怎么做。 通常你会将dialog()分配给div说$("#divName").dialog()但我更需要一个类似于alert_dialog("Custom message here")或类似内容的js函数。

有任何想法吗？

Answer 1

我认为你甚至不需要将它附加到DOM，这似乎对我有用：

 $("
Test message
").dialog(); 

这是一个JS小提琴：

http://jsfiddle.net/TpTNL/98

Answer 2

使用这里的一些信息，我最终创建了自己的函数来使用。

可以用作……

 custom_alert(); custom_alert( 'Display Message' ); custom_alert( 'Display Message', 'Set Title' ); 

jQuery UI警报替换

 function custom_alert( message, title ) { if ( !title ) title = 'Alert'; if ( !message ) message = 'No Message to Display.'; $('
').html( message ).dialog({ title: title, resizable: false, modal: true, buttons: { 'Ok': function() { $( this ).dialog( 'close' ); } } }); } 

Answer 3

只需将一个空的隐藏div放到你的html页面上并给它一个ID。 然后，您可以将其用于jQuery UI对话框。 您可以像通常使用任何jquery调用一样填充文本。

Answer 4

基于eidylon的答案，这里有一个版本，如果TitleMsg为空，则不会显示标题栏：

 function jqAlert(outputMsg, titleMsg, onCloseCallback) { if (!outputMsg) return; var 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(); } 

看到jsfiddle

Answer 5

正如nux和micheg79所提到的，在对话框关闭后，节点会留在DOM中。

这也可以通过添加以下内容进行清理：

 $(this).dialog('destroy').remove(); 

到对话框的close方法。 将此行添加到eidylon的答案中的示例：

 function jqAlert(outputMsg, titleMsg, onCloseCallback) { if (!titleMsg) titleMsg = 'Alert'; if (!outputMsg) outputMsg = 'No Message to Display.'; $("
").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(); } }); } 

编辑：我有问题获得回调函数运行，发现我必须添加括号（）到onCloseCallback实际触发回调。 这有助于我理解为什么： 在JavaScript中，如果我用括号调用函数会有所不同吗？

Answer 6

DAlert jQuery UI插件检查一下，这可能会对你有所帮助

Answer 7

我接受了@ EkoJR的回答，并在用户关闭对话框时添加了一个附加参数来传入回调函数。

 function jqAlert(outputMsg, titleMsg, onCloseCallback) { if (!titleMsg) titleMsg = 'Alert'; if (!outputMsg) outputMsg = 'No Message to Display.'; $("
").html(outputMsg).dialog({ title: titleMsg, resizable: false, modal: true, buttons: { "OK": function () { $(this).dialog("close"); } }, close: onCloseCallback }); } 

然后，您可以调用它并向其传递一个函数，该函数将在用户关闭对话框时发生，如下所示：

 jqAlert('Your payment maintenance has been saved.', 'Processing Complete', function(){ window.location = 'search.aspx' }) 

Answer 8

使用此代码语法。

  $("
").html("YOUR MESSAGE").dialog(); 

这可以工作，但它会将一个节点附加到DOM。 您可以使用类然后或首先删除该类的所有元素。 例如：

 function simple_alert(msg) { $('div.simple_alert').remove(); $('
').html(is_valid.msg).dialog({dialogClass:'simple_alert'}); } 

Answer 9

存在一个问题，如果您关闭对话框，它将执行onCloseCallback函数。 这是一个更好的设计。

 function jAlert2(outputMsg, titleMsg, onCloseCallback) { if (!titleMsg) titleMsg = 'Alert'; if (!outputMsg) outputMsg = 'No Message to Display.'; $("
").html(outputMsg).dialog({ title: titleMsg, resizable: false, modal: true, buttons: { "OK": onCloseCallback, "Cancel": function() { $( this ).dialog( "destroy" ); } }, });