Question

我正在尝试使用我的jQuery UI对话框找到一种调用自定义函数来关闭和保存的方法。

$("#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>

这是可能的还是我应该找到另一种实施方式？

Answer 1

您应该将按钮移动到模态窗口中。模态背后的概念是某些内容被迫引起用户的注意（通常高于之前的内容）并等待某种响应（关闭，提交等）。

话虽如此，可以使用外部按钮/控件来控制模态。

Answer 2

我建议如下：

$("#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");
});

这将隐藏标题栏和内容，只留下按钮组。由于Modal，用户被迫点击“保存”或“取消”。

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

2 个答案: