使两个JQuery UI对话框彼此居中 [英] Center two JQuery UI Dialogs on top of each other

问题描述

我可以添加一个居中的JQuery UI对话框，而不会出现任何问题.我想做的是添加两个JQuery UI对话框，一个在另一个对话框的顶部，屏幕的中心在两个对话框之间切换"，以使它们在屏幕上垂直居中.

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 > 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?

推荐答案

您可以使用open事件调整位置:

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

这篇关于使两个JQuery UI对话框彼此居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！