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

Posted 2023-02-21

【中文标题】jQuery UI 警报对话框作为 alert() 的替代品

【英文标题】：jQuery UI Alert Dialog as a replacement for alert()

【发布时间】：2011-12-26 03:39:05

【问题描述】：

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

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

有什么想法吗？

【参考方案1】：

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

$("<div>Test message</div>").dialog();

这是一个 JS 小提琴：

http://jsfiddle.net/TpTNL/98

【参考方案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' );
            
        
    );

【讨论】：

那里绝对很棒的小脚本！感谢您发布！请参阅下面的答案，我在其中添加了一些内容...

【参考方案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

【讨论】：

很好，但您可能希望在添加元素后进行清理。见：jsfiddle.net/q91cauvf

【参考方案4】：

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

【参考方案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?

【参考方案6】：

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

【参考方案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' )

【参考方案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" );
            

        ,
    );

【参考方案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');