Center two JQuery UI Dialogs on top of each other -

i can add 1 jquery ui dialog centered without issues. want add 2 jquery ui dialogs, 1 on top of other, center of screen "cutting between" 2 dialogs they're centered vertically on screen.

if add:

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

then first dialog centered second dialog under it. there way position first dialog higher half height?

you use open event 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 attempting looking positioning dimensions don't exist

demo