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

Question

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

由于错误不包含在(html)div中,我不知道该怎么做.通常你会分配dialog()到一个div说$("#divName").dialog()但我更需要一个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