JQuery 中返回布尔值的自定义确认框

Question

我正在使用 JQuery 和 JQuery UI，我尝试使用 JQuery UI Dialog 来解决这个问题，但我无法完成。

基本上我有例如这个使用 JS 确认框的代码：

// if user presses cancel, do not proceed to the next section of the code
if ( ! confirm('Are you sure you want to press OK?')) {
  return;
}

.... Lots of code below

我想将其转为使用可以使用 CSS 自定义的自定义框。我尝试了 UI 对话框：

function confirmIt(text) {
   $('#confirm_dialog').dialog({
      width: 300,
      height: 150,
      buttons: {
         "OK": function() { return true; },
         "Cancel": function() { return false; }
      }
   });
}

if ( ! confirmIt('Are you sure you want to press OK?')) {
   return;
}
.... Lots of code below

现在上面代码的问题是 if 条件下的很多代码仍然执行。我知道 JQuery Dialog 是 aync 进程，但我想知道是否有这样的免费插件，我可以使用它来返回布尔值？基本上功能方面它应该与 JS confirm() 完全相同。我不想在 JQuery UI 对话框的回调中包装大量代码来实现这一点。如果CANCEL is clicked，我只想停止脚本执行，如果OK is clicked，我只想继续执行。

Answer 1

由于无法停止脚本执行 (except for debugging)，您应该更改您的方法：

function confirmIt(text, okFunc, cancelFunc) {
   $('#confirm_dialog').dialog({
      width: 300,
      height: 150,
      buttons: {
         "OK": okFunc && okFunc,
         "Cancel": cancelFunc && cancelFunc
      }
   });
}

confirmIt('Are you sure you want to press OK?', function(){
    .... Lots of code below
}, function(){
    ...function on cancel (which can be empty)
});

所以如果您对取消按钮没有任何操作，请使用

confirmIt('Are you sure you want to press OK?', function(){
    .... Lots of code below
});

或

confirmIt('Are you sure you want to press OK?', confirmFunction);

function confirmFunction(){
    .... Lots of code below
}