jQuery UI 警报对话框作为 alert() 的替代品

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

基于 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 4

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

Answer 5

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

这也可以简单地通过添加：

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

对话框的关闭方法。 将此行添加到 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

有一个问题是，如果您关闭对话框，它将执行 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" );
            }

        },
    });

Answer 9

使用此代码语法。

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