Имитация подтверждения () с помощью диалога jqueryUI - PullRequest
3 голосов
/ 18 января 2012

Я бы хотел имитировать стандартное JavaScript-подтверждение () с помощью диалога jQueryUI. Я думал о чем-то вроде следующего, но я явно не понимаю, как это должно работать. Какие-либо предложения? Спасибо

return $("#dialog-cancel").dialog("open");

$("#dialog-cancel").dialog({
    autoOpen: false,height: 400,width: 350,modal: true,
    open: function(event, ui){},
    buttons: {'OK': function(){$(this).dialog("close");return true;},'CANCEL': function() {$(this).dialog("close");return false;}}
});

1 Ответ

5 голосов
/ 18 января 2012

Дубликат на самом деле не очень полезен.Я прошу прощения за это.

Основываясь на этом ответе , я бы сделал следующее:

  • создайте функцию, которая создаст базовуюмодальное диалоговое окно с сообщением и кнопками ОК / Отмена

  • принимает два обратных вызова для обеих кнопок, выполняемых при их нажатии

Преимущество состоит в том, что ононе блокирует весь браузер с бесконечным циклом, как в ответе.Опция modal диалогового окна jQuery UI просто блокирует текущую страницу.

Вот код:

function confirmDialog(message, onOK, onCancel) {

    $('<div>' + message + '</div>').dialog({
        modal: true,
        buttons : {
            "OK" : function() { 
                $(this).dialog("close");

                // if there is a callback, execute it
                if (onOK && $.isFunction(onOK)) {
                    onOK();
                }

                // destroy the confirmation dialog
                $(this).dialog("destroy");
            },
            "Cancel" : function() {
                $(this).dialog("close");
                if (onCancel && $.isFunction(onCancel)) {
                    onCancel();
                }
                $(this).dialog("destroy");
            }
        }
    });

}

И вы можете использовать его следующим образом:

$('button').click(function(e) {

    var okHandler = function() {
        alert('ok');
    };

    confirmDialog('Do you really want ?', okHandler);
});

DEMO

...