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不是可接受的垂直值。

可接受的水平值："left"，"center"，"right"。可接受的垂直值："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定位无法正常工作

1 个答案: