定位 jquery UI 对话框答案

【问题标题】：Position jquery UI dialog定位 jquery UI 对话框
【发布时间】：2011-12-22 01:42:42
【问题描述】：

如何专门定位 jquery UI 对话框，以便它转到中心、顶部等未定义的位置。

谢谢，我已经尽量做到具体了。

【问题讨论】：

stackoverflow.com/questions/744554/jquery-ui-dialog-positioning

【解决方案1】：

使用position 选项：http://jqueryui.com/position/

指定对话框的显示位置。可能的值：

1) 表示视口内位置的单个字符串：'center'、'left'、 “右”、“上”、“下”。
2) 一个包含 x,y 坐标的数组视口左上角的像素偏移对（例如 [350,100]）
3) 一个包含 x,y 位置字符串值的数组（例如 ['right','top'] 为右上角）。

例如：$( ".selector" ).dialog( "option", "position", [350,100] );

【讨论】：

请注意，这种数组形式的位置现在已被弃用api.jqueryui.com/dialog/#option-position

【解决方案2】：

这不是您问题的确切答案，但您可以将“顶部”与像素值混合，如下所示：

$('#widget').dialog({
  position: ['top', 100]
});

这将使对话框以 X 轴为中心，从顶部向下 100 像素。

【讨论】：

您知道，'top' 组件在此示例中没有执行任何操作。当您将数组传递给位置选项时，它需要一个[x,y] coordinate pair。字符串无法解析为整数，因此默认水平定位保持为中心。您可以用任何字符串替换 'top' 部分，它仍然可以以相同的方式工作：Fiddle Demo
感谢您的澄清。

【解决方案3】：

如果你想使用绝对定位，对话框的position 选项就是你需要的。如果您需要相对于其他元素进行定位，您可以使用另一种简单的技术，jquery UI 的$('selector').position(options);（参见：http://jqueryui.com/demos/position/）

例如：

// div to position against
var $div = $('#someDiv');

// Open dialog (positioning won't work on hidden elements)
$dialog.dialog('open');

// position newly opened dialog (using its parent container) below $div.
$dialog.dialog('widget').position({
  my: "left top",
  at: "left bottom",
  of: $div
});

【讨论】：

@Cheekysoft 您的评论似乎暗示此表单已被弃用。这不是使用数组，而是使用对象参数，这是位置方法所需的参数类型。您说不推荐使用数组和字符串参数形式是正确的。