jQuery延期和对话框

function ValidateField(){ var bAllow= true; //some checking here if (bAllow == true && apl.val().trim() == "") { showDialog(); showDialog().done(function() { return true; // wanna return true, but not success }).fail(function() { return false; //wanna return false, but not success }); return false; //stop it to execute to next line } return bAllow; //success return } function showDialog(){ var def = $.Deferred(); var modPop = '<div id="diaCom" title="Information?"><p>something something</p></div>'; $("#diaCom").remove(); $(modPop).appendTo('body'); $("#diaCom").dialog({ resizable: false, draggable: false, height:150, width:300, modal: true, buttons: { "Ok": function() { def.resolve(); $(this).dialog("close"); }, "Cancel": function() { def.reject(); $(this).dialog("close"); } } }); return def.promise(); } //on click if (validateField() == true){ //do something }else{ //do something } 

大家好，有什么机会能够回报这个价值？ 我希望通过showDialog（）。done（）函数返回true和false，但是不能用于validatefield（）函数，但它不能用于我想要的，我不能指定给bAllow，因为我已经有了一个返回false来保存执行下一行的对话框，任何想法？ 或者像这样做是正确的？

Answer 1

那么，这可以工作。

你的对话框函数showDialog（）

 function confirmation(question) { var defer = $.Deferred(); $('<div></div>') .html(question) .dialog({ autoOpen: true, modal: true, title: 'Confirmation', buttons: { "Yes": function () { defer.resolve("true");//this text 'true' can be anything. But for this usage, it should be true or false. $(this).dialog("close"); }, "No": function () { defer.resolve("false");//this text 'false' can be anything. But for this usage, it should be true or false. $(this).dialog("close"); } }, close: function () { $(this).remove(); } }); return defer.promise(); } 

然后在你使用函数的代码…

 function onclick(){ var question = "Do you want to start a war?"; confirmation(question).then(function (answer) { var ansbool = Boolean.parse(answer.toString()); if(ansbool){ alert("this is obviously " + ansbool);//TRUE } else { alert("and then there is " + ansbool);//FALSE } }); } 

这对大多数人来说似乎是错误的。 但总是有些情况下，如果没有JQuery对话框的返回，就无法进入。

这将基本上模仿confirm（）函数。 但与丑陋的代码和一个不错的确认框看:)

我希望这可以帮助一些人。

---

编辑：Bootstrap 3解决scheme

---

我现在正在使用NakuPanda的 bootstrap库，它工作得很好。 基本上与JQueryUI相同，但在Bootstrap UI中。

 function bsConfirm(question) { var defer = $.Deferred(); BootstrapDialog.show({ type: BootstrapDialog.TYPE_PRIMARY, title: 'Confirmation', message: question, closeByBackdrop: false, closeByKeyboard: false, draggable: true, buttons: [{ label: 'Yes', action: function (dialog) { defer.resolve(true); dialog.close(); } }, { label: 'No', action: function (dialog) { defer.resolve(false); dialog.close(); } }], close: function (dialog) { dialog.remove(); } }); return defer.promise(); } function bsAlert(error, message) { BootstrapDialog.show({ type: error ? BootstrapDialog.TYPE_DANGER : BootstrapDialog.TYPE_SUCCESS, title: error ? "Error" : "Success", message: message, closeByBackdrop: false, closeByKeyboard: false, draggable: true, buttons: [{ label: 'OK', action: function (d) { d.close(); } }] }); } 

并使用它（几乎相同的方式）

 bsConfirm("Are you sure Bootstrap is what you wanted?").then(function (a) { if (a) { bsAlert("Well done! You have made the right choice"); } else { bsAlert("I don't like you!"); } }); 

Answer 2

我已经创build了这个JSFIDDLE，并改变了布尔分析，因为这是炸毁。 谢谢，皮埃尔！ 这节省了我很多时间。

JavaScript的：

 function confirmation(question) { var defer = $.Deferred(); $('<div></div>') .html(question) .dialog({ autoOpen: true, modal: true, title: 'Confirmation', buttons: { "Yes": function () { defer.resolve("true");//this text 'true' can be anything. But for this usage, it should be true or false. $(this).dialog("close"); }, "No": function () { defer.resolve("false");//this text 'false' can be anything. But for this usage, it should be true or false. $(this).dialog("close"); } }, close: function () { //$(this).remove(); $(this).dialog('destroy').remove() } }); return defer.promise(); }; function onclick(){ var question = "Do you want to start a war?"; confirmation(question).then(function (answer) { console.log(answer); var ansbool = (String(answer) == "true"); if(ansbool){ alert("this is obviously " + ansbool);//TRUE } else { alert("and then there is " + ansbool);//FALSE } }); } $("#item").on('click', onclick); 

HTML：

 <button id="item">Hello, click me.</button> 

Answer 3

为什么不使用拒绝方法parsing（“false”）。 然后你将能够传递一个对象作为参数。 假设您有多个input字段，每个字段都有一个删除button：

  function confirmation(question,obj) { var defer = $.Deferred(); $('<div></div>') .html(question) .dialog({ autoOpen: true, modal: true, title: 'Confirmation', buttons: { "Oui": function () { defer.resolve(obj);// pass the object to delete to the defer object $(this).dialog("close"); }, "Non": function () { defer.reject();//reject, no need to pass the object $(this).dialog("close"); } }, close: function () { $(this).dialog('destroy').remove() } }); return defer.promise(); } $(document).on("click", ".btn-suppr",function (){// all delete buttons having a class btn-suppr var question = "Are you sure to delete this fieldset ?"; confirmation(question,$(this)).then(function (obj) { obj.parent('fieldset').remove(); // remove the parent fieldset of the delete button if confirmed }); });