相对于元素和窗口的相对位置

我目前有一个定义了一堆选项的对话框。当用户点击一个按钮时显示。我的对话框定义为：相对于元素和窗口的相对位置

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

这弹出我的对话框，居中在我的按钮下方。
我实际上想要做的是弹出按钮下方的对话框，但集中在我的窗口。

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

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

来源

2013-01-02 Ellesedil

而不是使用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在上面的例子，但你可以使用，而不是如果你想窗口，应该有很少或几乎没有差别。

编辑

修正了一个监督由此边界高度，填充和余量按钮的未正确包括在内。

我救了小提琴而不outerHeight(true)加入height的扣除包括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下面并不需要它，但如果你这样做，移动它，看看它是如何结合使用。

请注意，如果您的按钮i s接近屏幕底部模式将而不是低于按钮，因为它不能在屏幕外但它会将对话框的底部与屏幕的底部对齐。这是预期的行为。你会发现，如果按钮在它下面有足够的空间，对话框将始终如预期，就在按钮下方。

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

来源

2013-01-02 21:57:36 Nope

也许我建议取消按钮.height并简单地使用'var top = $ button.position（）。top + $ button.outerHeight（true）;'而不是？看起来'outerHeight'已经可以满足您获得按钮高度所需的一切。 – Ellesedil

@Ellesedil：对不起，我似乎过早地保存了我的小提琴，忘记在divison之前正确地从'outerHeight（true）'中扣除'height'。这些原因是为了确保在定位对话框的“顶部”时考虑按钮的所有“边界”，“边距”或“填充”。 – Nope

@Ellesedil：有一些逻辑可以解决，但现在如果你将边距和填充应用到按钮上，他们也会在顶部计算中考虑。 – Nope

我可以想出最好的一点是当打开对话框时，你将不得不自己指定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

来源

2013-01-02 21:57:19

相对于元素和窗口的相对位置

回答

相关问题