title: jquery UI positioning not working right
body: <p>For the first dialog using</p>
  
  <pre><code>position: {
    my: "center middle",
    at: "center middle",
    of: window
  },
  </code></pre>
  
  <p>works correctly and centered in the middle of the screen. Then I have a confirmation dialog that appears on top of that using the same code and it seems to have the top left corner align with the middle, as if the <code>my</code> part isn't working right. Is there something special that has to be done when more than one dialog is displayed?</p>
  
  <p>Screenshot
  <a href="https://i.stack.imgur.com/NRL9r.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NRL9r.png" alt="enter image description here"></a></p>
  
  <p>excerpt of code <code>SetupDialog</code> function sets up the first dialog that is correctly centered the <code>openConfirmation</code> function sets up the one that isn't working right</p>
  
  <pre class="lang-js prettyprint-override"><code>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 = $("&lt;div id='submitConfirm'&gt;&lt;/div&gt;").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 &lt;br&gt;for the group named : '" + self.groupName + "' and mark the group as completed&lt;br&gt;&lt;br&gt;"
          );
        },
        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");
          }
        }
      });
    },
  </code></pre>