JQuery UI Alert Dialog в качестве замены для предупреждения()

Ответ 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

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

Просто поместите пустой скрытый div на вашу страницу html и дайте ему идентификатор. Затем вы можете использовать это для своего диалогового окна интерфейса jQuery. Вы можете заполнить текст так же, как обычно, с любым вызовом jquery.

Ответ 4

Основываясь на ответе эйдилона, здесь версия, которая не отображает строку заголовка, если 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

Ответ 5

Как упоминалось nux и micheg79, a node остается в DOM после закрытия диалога.

Это можно также очистить, добавив:

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

чтобы закрыть метод диалога. Пример добавления этой строки в ответ эйдилона:

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

EDIT: у меня были проблемы с запуском функции обратного вызова, и я обнаружил, что мне пришлось добавлять скобки() в onCloseCallback, чтобы фактически вызвать обратный вызов. Это помогло мне понять, почему: В JavaScript, имеет ли значение, если я вызываю функцию с круглыми скобками?

Ответ 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

Используйте этот синтаксис кода.

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

это работает, но добавляет node в DOM. Вы можете использовать класс, а затем или сначала удалить все элементы с этим классом. например:

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

Ответ 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" );
            }

        },
    });