jquery UI positioning not working right
<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>