jquery UI 定位不正确

Question

第一个对话框使用

position: {
  my: "center middle",
  at: "center middle",
  of: window
},

工作正常并在屏幕中间居中。然后我有一个使用相同代码出现在其顶部的确认对话框，它的左上角似乎与中间对齐，就好像 my 部分工作不正常一样。当显示多个对话框时，是否需要做一些特殊的事情？

截图

代码摘录 SetupDialog 函数设置第一个正确居中的对话框 openConfirmation 函数设置不正确的对话框

setupDialog: function() {
    var self = this;
    this.$div.dialog({
      modal: true,
      width: "auto",
      autoResize: true,
      resizable: true,
      autoOpen: false,
      position: {
        my: "center middle",
        at: "center middle",
        of: window
      },
      title: "Submit Group",
      buttons: {
        Submit: function() {
          var checked = $("input[type=radio][name=calcSelectionRadio]:checked");

          if (self.invalidInput(checked)) {
            ShowError("You cannot select this row because it contains invalid values");
          }

          switch (checked.val()) {
            case "manual":

              var row = [];
              $(checked).parents("tr").children("input").each(function(index, input) {
                row.push($(input).val());
              });

              self.openConfirmation(row);
              break;
            case "lastYear":

              self.openConfirmation(self.lastYearArray);
              break;
            case "calculated":
              self.openConfirmation(self.calculatedArray);
              break;
            default:
              ShowError("You must select a row of values to submit");
          }

        },
        Cancel: function() {
          $(this).dialog("close");
        }
      },
      open: function() {},
      close: function() {}
    });
  },
  openConfirmation: function(classArray) {
    var self = this;
    var dialogDiv = $("<div id='submitConfirm'></div>").dialog({
      modal: true,
      title: "Confirmation",
      width: "auto",
      position: {
        my: "center middle",
        at: "center middle",
        of: window
      },
      open: function() {
        $(this).html(
          "This operation will replace all class AADT values <br>for the group named : '" + self.groupName + "' and mark the group as completed<br><br>"
        );
      },
      close: function() {
        $(this).dialog("destroy").remove();
      },
      buttons: {
        OK: function() {
          Utils.disableDialogInputs(dialogDiv, true);
          WebMethod.UpdateAadts(self.groupId, window.currentYear, classArray, function(err, response) {
            Utils.disableDialogInputs(dialogDiv, false);

            if (err) throw err;

            $(this).dialog("close");
            self.$div.dialog("close");
          });
        },
        Cancel: function() {
          $(this).dialog("close");
        }
      }
    });
  },

Answer 1

首先，middle 不是可接受的垂直值。

Acceptable horizontal values: "left", "center", "right". Acceptable vertical values: "top", "center", "bottom".

参考：https://api.jqueryui.com/position/

现在，默认情况下，值为：

position: { my: "center", at: "center", of: window }

查看更多：https://api.jqueryui.com/dialog/#option-position

所以默认定位应该有效。对于第二个对话框，您可以使用第一个对话框的 div 元素并以该元素为中心：

position: {
  my: "center",
  at: "center",
  of: "#setupDialog"
}

由于您没有提供 HTML 或任何测试示例的方法，我看不出是否有任何其他因素可能影响定位或测试此解决方案。

jquery UI 定位不正确

jquery UI positioning not working right

jquery

position

jquery-ui