Jquery 相对于图元和窗口的定位

我目前有一个对话框，其中定义了一系列选项。当用户单击一个按钮时，它就会显示出来。我的对话框定义为：

$（'newIssueDialog'）。对话框({
自动打开：错误，
莫代尔：是的，
closeOnEscape：没错，
可拖动：错误，
可调整大小：false，
宽度：415，
身高：175，
位置：{my:“top”，在“#btnNewIssue”}的“bottom”
});

这将弹出我的对话框，位于我按钮下方的中央。
我实际上想做的是弹出按钮下方的对话框，但以我的窗口为中心

有什么办法吗

---

编辑：另外，是否可以考虑窗口相对于文档的位置？如中所示，如果页面上有滚动条，并且用户已垂直或水平滚动页面，我们可以计算按钮的位置以及我们在页面上的位置，使其仍然位于按钮下方并居中吗？

我能想到的最好办法是，在打开对话框时，您必须自己指定X/Y坐标

$("#btnNewIssue").button().click(function(){
    var x = ($(window).width() - 415) / 2;
    var y = $(this).offset().top + $(this).height();
    $("#newIssueDialog").dialog("option", "position", [x,y]).dialog("open");
});​

---

您可以自己计算

左侧和
顶部的位置，而不是使用
my，at，of
，如下所示：

$("#btnNewIssue").on("click", function() {
    var $button = $(this);
    var $dialog = $('#newIssueDialog');

    //var top = $button.position().top + $button.height() + ($button.outerHeight() / 2);
    var top = $button.position().top + $button.height() + (($button.outerHeight(true) - $button.height()));
    var left = ($(document).width() - ($dialog.outerWidth / 2)) / 2

    $dialog.dialog({
        autoOpen: true,
        modal: true,
        closeOnEscape: true,
        draggable: false,
        resizable: false,
        width: 415,
        height: 175,
        position: [left, top]
    });
});​

var top = $button.position().top + $button.height() + ($button.outerHeight(true) - $button.height()) - $(window).scrollTop();

以基本HTML为例：

<div id="newIssueDialog"> My modal dialog</div>
<button id="btnNewIssue">Click Me</button>

应该是这样的：

var top = $button.position().top + $button.height() + (($button.outerHeight(true) - $button.height()));

演示也已更新

编辑

但是，如果屏幕上存在滚动条，我现在遇到了一个问题
这一页

对于垂直滚动位置，只需在末尾扣除当前的
scrollTop（）
值，如下所示：

$("#btnNewIssue").on("click", function() {
    var $button = $(this);
    var $dialog = $('#newIssueDialog');

    //var top = $button.position().top + $button.height() + ($button.outerHeight() / 2);
    var top = $button.position().top + $button.height() + (($button.outerHeight(true) - $button.height()));
    var left = ($(document).width() - ($dialog.outerWidth / 2)) / 2

    $dialog.dialog({
        autoOpen: true,
        modal: true,
        closeOnEscape: true,
        draggable: false,
        resizable: false,
        width: 415,
        height: 175,
        position: [left, top]
    });
});​

var top = $button.position().top + $button.height() + ($button.outerHeight(true) - $button.height()) - $(window).scrollTop();

在水平方向放置模态，不需要改变任何东西。上面用来计算
左
的代码似乎总是有效的但是如果您的特定标记中存在问题，请查看我假设的工作方式与您需要扣除的方式相同，类似于：

var left = (($(document).width() - ($dialog.outerWidth / 2)) / 2) - $(window).scrollLeft();

或者可能

var left = ($(window).scrollLeft() - $(document).width() - ($dialog.outerWidth / 2)) / 2;

如前所述，下面的演示不需要它，但如果需要，请移动它，看看它是否适合

请注意，如果您的按钮靠近屏幕底部
模式将不在按钮下方，因为它不能离开屏幕
但它会将对话框的底部与对话框的底部对齐
而不是屏幕。这是意料之中的行为。你看如果
按钮下方有足够的空间对话框将始终如预期一样，
就在按钮下面

-包括窗口滚动位置

（您需要向下滚动才能找到按钮，也可以向右滚动以正确测试）
我建议删除button.height，只需使用
var top=$button.position（）.top+$button.outerHeight（true）而不是？看来，
outerHeight
已经可以满足您获取按钮高度所需的一切要求了。@Ellesedil:很抱歉，似乎我过早地保存了小提琴，忘记了在除数之前从
outerHeight（true）
中正确扣除高度。存在这些边界的原因是为了确保任何
边界
，
边距
或
填充
在定位对话框的
顶部
时，按钮已被考虑。@Ellesedil:有一些逻辑需要解决，但现在如果将边距和填充应用于按钮，它们也会被考虑在
顶部
计算中。虽然我已对该方法进行了一些修改，以适应我的需要需要，这是相当好的工作。我喜欢它，因为我不需要定义预期的高度/宽度。但是，如果页面上存在滚动条，我现在遇到了一个问题。我把我的问题删去以反映这一点。@Ellesedil:请看我的编辑。我添加了
$（window.scrollTop（）
的扣减，以便在屏幕滚动时计算正确的
top
值。对于
左
值，应该没有在演示中看到的更改。如果按钮靠近屏幕底部，没有留出足够的空间显示对话框，请参见对话框位置上的注释。对话框将不在按钮下方，而是与屏幕底部齐平，这是防止模式最初显示在视口外的预期行为。我希望这有帮助。