jquery ui对话框确认

我是，试图使用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; } } }); } 

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

Answer 1

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

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

在此示例中，asyncEvent

1）创建一个jquery延迟对象

2）有解决/拒绝的逻辑，你的确定/取消

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

你要做的是

1）创建一个jquery延迟对象

2）启动对话框，使用ok / cancel设置deferred.resolve / reject

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

4）使用延迟的promise对象与$ .when 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" ); }); 

您也可以使用resolve并确定$ .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(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

这就是我使用zepto进行模块延迟和回调，就像一个魅力。 对于jquery应该是类似的，或者你可以将deferred和callbacks模块导入你的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") }); 

Answer 3

您应该在文档就绪function上加载对话框。 在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; } } }); });