Question

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

    $('#newIssueDialog').dialog({
        autoOpen: false,
        modal: true,
        closeOnEscape: true,
        draggable: false,
        resizable: false,
        width: 415,
        height: 175,
        position: {my: "top", at: "bottom", of: "#btnNewIssue"}
    });

这会弹出我的对话框，位于我的按钮下方我真正想做的是弹出按钮下面的对话框，但是以窗口为中心。

关于如何做到这一点的任何想法？

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

Answer 1

您可以自行计算my, at, of和left的位置，而不是使用top：

$("#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]
    });
});

使用基本HTML作为示例：

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

DEMO - 按钮下方的定位对话框，但以窗口/文档为中心

我在上面的例子中使用document，但如果你愿意，你可以使用窗口，应该没什么区别。

修改

修正了疏忽，因此未正确包含按钮的边框高度，填充和边距。

我保存了小提琴而没有添加height outerHeight(true)的扣除，以包含按钮的borders，padding和margins以及按钮有任何指定的情况。

这：

var top = $button.position().top + $button.height() + ($button.outerHeight() / 2);

应该是这样的：

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

演示也已更新。

修改

但是，如果存在滚动条，我现在遇到了问题页面。

对于垂直滚动位置，只需在结尾处扣除当前scrollTop()值，如下所示：

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

如果将模态水平放置在中间，则无需更改任何内容。以上计算left的代码似乎始终有效。然而如果您在特定标记中遇到问题，请查看scrollLeft()我认为它会以相同的方式工作，因为您需要扣除它类似于：< / p>

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

或可能

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

如上所述，下面的DEMO不需要它，但如果你这样做，请移动它，看看它是如何适应的。

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

DEMO - 包括窗口滚动位置
（您需要向下滚动才能转到按钮，您也可以向右滚动以正确测试）

Answer 2

我能想到的最好的事情是你打开对话框时必须自己指定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");
});

Demo JSFiddle

相对于元素和窗口的定位

2 个答案: