jQuery ui对话框自定义关闭函数

我试图找到一种使用jQueryUI对话框调用自定义函数进行关闭和保存的方法

$("#checkbox-confirm").dialog({
    width: 600,
    autoOpen: false,
    modal: true,
    responsive: true,
    close: function() {
      // special things happen when they click the cancel button
      $(this).dialog("close");
    },
    save: function() {
      // also some special things then close the dialog
    }
});

$(".btn-cancel").click(function(e) {
    e.preventDefault();
    $("#checkbox-confirm").dialog("close");
});

$(".btn-save").click(function(e) {
  e.preventDefault();
  $("#checkbox-confirm").dialog("save")
});

我的按钮与我的对话框分开，如：

<div id="#checkbox-confirm">
   modal things here 
   <button class="btn-cancel>Cancel</button>
   <button class="btn-save">Save</button>
</div>

这里的情态事物
您可能应该将按钮移动到模式窗口中。模式背后的概念是，一些内容被强迫引起用户的注意（通常高于先前的内容），并等待某种响应（关闭、提交等）

也就是说，可以使用外部按钮/控件控制模式。
我建议如下：

$("#checkbox-confirm").dialog({
    width: 600,
    autoOpen: false,
    modal: true,
    responsive: true,
    _allowInteractions: function(e){
      return !!$(e.target).is("#checkbox-confirm button") || this._super(e);
    }
});

$(".btn-cancel").click(function(e) {
  e.preventDefault();
  // Do special Cancel stuff
  $("#checkbox-confirm").dialog("close");
});

$(".btn-save").click(function(e) {
  e.preventDefault();
  // Do Special Save Stuff
  $("#checkbox-confirm").dialog("close");
});

就我个人而言，我不会将按钮移出按钮集，而是使您的对话框不那么显眼

CSS

.mini-dialog .ui-dialog-titlebar {
  display: none;
}

.mini-dilaog .ui-dialog-buttonpane {
  margin: 0;
  border: 0;
}

jQuery

$("#checkbox-confirm").dialog({
    dialogClass: "mini-dialog",
    width: 600,
    autoOpen: false,
    modal: true,
    responsive: true,
    buttons: [{
      text: "Cancel",
      class: "btn-cancel",
      click: function(){
        // special things happen when they click the cancel button
        $(this).dialog("close");
      }
    },
    {
      text: "Save",
      class: "btn-save",
      click: function(){
        // also some special things then close the dialog
        $(this).dialog("close");
      }
    }]
});

$("#checkbox-confirm").on("dialogopen" function(e){
  $(this).css("display", "none");
});

这将隐藏标题栏和内容，只保留按钮集。由于模式原因，用户被迫点击Save或Cancel。
Save
不是
对话框的事件或方法，因此这将不起作用。我将创建独立的函数，然后在完成后关闭
对话框
。