jquery ui对话框确认

Question

我在尝试使用jquery对话框复制javascript的'确认'框。这是我的代码，

function customConfirm(customMessage) { 
     $("#popUp").html(customMessage); 
     $("#popUp").dialog({ 
      resizable: false, 
      height: 240, 
      modal: true, 
      buttons: { 
       "OK": function() { 
        $(this).dialog("close"); 
        alert(true); 
        return true; 
       }, 
       Cancel: function() { 
        $(this).dialog("close"); 
        alert(false); 
        return false; 
       } 
      } 
     }); 
    } 

但是，当我试图提醒这种方法，它显示'未定义'。它不在等待弹出窗口显示。我如何使这个customConfirm函数等待用户输入（确定/取消）？ 我的需求是，customConfirm（）方法将根据用户输入返回true或false。

Answer 1

你需要做的是使用jQuery.deferred /承诺。

http://api.jquery.com/deferred.promise/

在这个例子中，asyncEvent

1）创建一个jquery推迟对象

2）具有用于解决/拒绝，您的确定逻辑/取消

3）返回一个deferred.promise（）对象，然后可以与$ .when一起使用来确定延迟对象是否已解析或拒绝（ok/cancel）。

你会做什么是

1）创建一个jQuery Deferred对象

2）启动您的对话，以确定/取消设定deferred.resolve /拒绝

3）返回一个deferred .promise（）对象，

4）使用延迟承诺的对象与$。当 http://api.jquery.com/jQuery.when/

function customConfirm(customMessage) { 
    var dfd = new jQuery.Deferred(); 
    $("#popUp").html(customMessage); 
    $("#popUp").dialog({ 
     resizable: false, 
     height: 240, 
     modal: true, 
     buttons: { 
      "OK": function() { 
       $(this).dialog("close"); 
       alert(true); 
       dfd.resolve(); 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
       alert(false); 
       dfd.reject(); 
      } 
     } 
    }); 
    return dfd.promise(); 
} 

$.when(customConfirm('hey')).then(
    function() { 
    alert("things are going well"); 
}, 
function() { 
    alert("you fail this time"); 
}); 

你也可以只使用决心，并确定是否确认是在$。当真或假，

function customConfirm(customMessage) { 
    var dfd = new jQuery.Deferred(); 
    $("#popUp").html(customMessage); 
    $("#popUp").dialog({ 
     resizable: false, 
     height: 240, 
     modal: true, 
     buttons: { 
      "OK": function() { 
       $(this).dialog("close"); 
       alert(true); 
       dfd.resolve(true); 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
       alert(false); 
       dfd.resolve(false); 
      } 
     } 
    }); 
    return dfd.promise(); 
} 

$.when(customConfirm('hey')).then(
    function(confirm) { 

    if(confirm){alert("things are going well");} 
    else{alert("you fail this time");} 
}); 

希望有所帮助。

Answer 2

您应该在文档就绪功能中加载对话框。呼吁customConfirm功能对话框打开，

function customConfirm(customMessage) { 
    $("#popUp").html(customMessage); 
    $("#popUp").dialog("open"); 
    } 

    $(document).ready(function(){ 
    $("#popUp").dialog({ 
     resizable: false, 
     autoOpen: false, 
     height: 240, 
     modal: true, 
     buttons: { 
      "OK": function() { 
       $(this).dialog("close"); 
       alert(true); 
       return true; 
      }, 
      Cancel: function() { 
       $(this).dialog("close"); 
       alert(false); 
       return false; 
      } 
     } 
    }); 

    }); 

Answer 3

这就是我使用zepto模块推迟和回调，像魅力一样工作。 应该是jQuery的相似或者你可以导入延迟和回调模块到HTML

function customConfirm(customMessage) { 
    var d = new $.Deferred(); 
    $("#popUp").html(customMessage); 
    $("#popUp").dialog({ 
     resizable: false, 
     height: 300, 
     modal: true, 
     buttons: { 
      "Yes": function() { 
       $(this).dialog("close"); 
       d.resolve() 
      }, 
      "No": function() { 
       $(this).dialog("close"); 
       d.reject(); 
      } 
     } 
    }); 
return d.promise(); 
} 

customConfirm("Do you Want to delete the File?") 
.then(function(){ 
    console.log("You Clicked Yes") 
}) 
.fail(function(){ 
    console.log("You Clicked No") 
});