0

I can add one JQuery UI Dialog centered without any issues. What I want to do is add two JQuery UI Dialogs, one on top of the other, with the center of the screen "cutting between" the two dialogs so that they're centered vertically on the screen.

If I add:

if(i > 0) {
    $("#dialog" + i).dialog("option", "position", {my: "top", at: "bottom", of: $("#dialog" + (i-1))});
}

then the first dialog will be centered with the second dialog under it. Is there some way to position the first dialog to be higher by half its height?

Travis Pettry
  • 1,220
  • 1
  • 14
  • 35
Anonymous1
  • 3,877
  • 3
  • 28
  • 42

1 Answers1

0

You could use the open event to adjust positions:

$('#dialog1, #dialog2').dialog({
    open: function() {
      var $this = $(this),
        $parent = $this.parent(),
        halfWidth = $parent.outerWidth() / 2,
        parentLeft = $parent.position().left;

      parentLeft += $this.is('#dialog1') ? (0 - halfWidth) : halfWidth;

      $parent.css({left: parentLeft});
    }
  });

The approach you are attempting would be looking for positioning dimensions that don't already exist

DEMO

charlietfl
  • 170,828
  • 13
  • 121
  • 150