2

我目前有一个定义了一堆选项的对话框。它在用户单击按钮时显示。我的对话框定义为：

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

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

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

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

4

2 回答 2

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>

​</p>

演示- 按钮下方的定位对话框，但位于窗口/文档的中心

我document在上面的示例中使用，但如果需要，您可以使用 window 代替，应该几乎没有区别。

编辑

修复了一个疏忽，即没有正确包含按钮的边框高度、填充和边距。

height我保存了小提琴，但没有添加对from的扣除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()我认为它的工作方式与您需要扣除它的方式相同，类似于：

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

或者可能

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

如前所述，下面的 DEMO 不需要它，但如果需要，请移动它并查看它是否适合。

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

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

于 2013-01-02T21:57:36.497 回答
0

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

演示 JSFiddle

于 2013-01-02T21:57:19.240 回答