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

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 Alert Replacement

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-страницу и присвойте ему идентификатор. Затем вы можете использовать это для вашего диалога 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();
                          }
    });
}

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

Answer 6

Я взял ответ @ 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 7

DAlert jQuery UI Plugin Проверьте это, это может помочь вам

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