用jQuery confirm替换JavaScript confirm

Question

我使用下面的代码通过jquery ui对话框来使用默认的javascript确认。

jQuery.extend({
    confirm: function(message, title, okAction) {
        jQuery("<div></div>").dialog({
            // Remove the closing 'X' from the dialog
            open: function(event, ui) { jQuery(".ui-dialog-titlebar-close").hide(); }, 
            buttons: {
                "Ok": function() {
                    jQuery(this).dialog("close");
                    return true;
                },
                "Cancel": function() {
                    jQuery(this).dialog("close");
                    return false;
                }
            },
            close: function(event, ui) { jQuery(this).remove(); },
            resizable: false,
            title: title,
            modal: true
        }).text(message);
    }
});

jQuery.confirm(
        "LogOut",
        "Do you want to log out",
        function() { 
        });

现在我需要在注销操作中使用相同的代码，以便可以替换代码中的javascript确认框。

<a class="homeImage" onclick="return confirm('Do you want to logout?');" href="/future/myhome/head?$event=logout">LOG OUT</a>

我现在面临的问题是，当我用另一个函数替换confirm并等待它的返回值来做决定时，对话框没有将值返回给变量。这两个函数同时执行（它显示警告，但也会跳转到href目标）。有没有办法使该方法返回true或false值，从而继续进行href目标。

参考链接：jQuery Extend，jQuery UI替代警告框
相关问题：JavaScript覆盖confirm函数

- arjuncc

---

问题在于jQuery.confirm()没有返回任何内容，而是按钮函数有返回值。 - LazyTarget

我知道，所以我在“确定”和“取消”按钮中有一个返回true和false，但仍然无法工作。那么我该如何修改我的代码来返回这些值呢？这是我的问题，你能帮忙吗？ - arjuncc

Answer 1

我不确定你是否能够实现这一点，因为jQuery.dialog函数是异步的。

你可以使用一个Promise库来设置按钮点击事件。但是，你不能简单地在onclick属性中指定一个方法，而必须通过代码来实现。

var d = jQuery.Deferred();
d.resolve(true); // resolve is used then to mark the function as complete
return d.promise(); // return the promise

jsFiddle

jQuery.extend({
    confirm: function(message, title, okAction) {
        var d = jQuery.Deferred();
        jQuery("<div></div>").dialog({
            // Remove the closing 'X' from the dialog
            open: function(event, ui) { jQuery(".ui-dialog-titlebar-close").hide(); }, 
            buttons: {
                "Ok": function() {
                    jQuery(this).dialog("close");
                    d.resolve(true);
                    return true;
                },
                "Cancel": function() {
                    jQuery(this).dialog("close");
                    d.resolve(false);
                    return false;
                }
            },
            close: function(event, ui) { jQuery(this).remove(); },
            resizable: false,
            title: title,
            modal: true
        }).text(message);
        return d.promise();
    }
});

欲知更多关于jQuery promise库的信息，请参阅jQuery reference

编辑：另一种设置方法：jsFiddle

- LazyTarget

Answer 2

问题在于默认的confirm对话框是同步的，会阻塞整个浏览器UI。JQuery对话框是异步的，不会阻塞UI（因为它需要UI来呈现）。

所以你的问题的答案如下：你需要改变：

         buttons: {
            "Ok": function() {
                window.location = "/future/myhome/head?$event=logout"
            },

and

 <a class="homeImage" onclick="return jQuery.confirm('Do you want to logout?');return false;" href="/future/myhome/head?$event=logout">LOG OUT</a>

- Piotr Stapp

Answer 3

就我个人而言，我更多地使用confirm来执行函数的条件或提交表单...

因此，根据您的示例，我会进行以下小改动：

buttons: {
         "Ok": function() {
              jQuery(this).dialog("close");
              okAction();  
         },

然后调用Confirm如下：

onclick="jQuery.confirm('Do you want to logout?','Confirm:',function(){window.location='/future/myhome/head?$event=logout'}); return false;">LOG OUT</a>

- Tony Carbone