Question

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

由于错误未包含在（html）div中，因此我不确定如何执行此操作。通常情况下，您会将dialog()分配给div $("#divName").dialog()，但我更需要js函数，例如alert_dialog("Custom message here")或类似的东西。

有什么想法吗？

Answer 1

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

$("<div>Test message</div>").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.';

    $('<div></div>').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></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.';

    $("<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();
                          }
    });
}

编辑：我遇到了回调函数运行的问题，发现我必须在onCloseCallback上添加括号（）来实际触发回调。这有助于我理解原因：In JavaScript, does it make a difference if I call a function with parentheses?

Answer 6

DAlert jQuery UI Plugin看看这个，这可能会对你有帮助

Answer 7

我接受了@ 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
    });
}

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

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

Answer 8

使用此代码语法。

   $("<div></div>").html("YOUR MESSAGE").dialog();

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

function simple_alert(msg)
{
    $('div.simple_alert').remove();
    $('<div></div>').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.';

    $("<div></div>").html(outputMsg).dialog({
        title: titleMsg,
        resizable: false,
        modal: true,
        buttons: {
            "OK": onCloseCallback,
            "Cancel": function() {
          $( this ).dialog( "destroy" );
            }

        },
    });

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

9 个答案: