1

我的页面中有一个文本字段：

<input type='text' />

我有一些逻辑，如果输入了某些内容，则会在下面出现一个 div。（div 就像一个组合中的弹出窗口，给你一个想法）

问题是，如果文本字段位于页面底部，我宁愿 div 出现在文本字段的顶部。

有没有简单的方法来实现这一点？

另一种表达方式是：

我如何知道在另一个 HTML 元素底部添加 div 是否不适合当前页面？

4

2 回答 2

1

您可以检查元素下方的可用空间并根据需要确定位置。

var popupTop = <offset-top-of-element> + element.offsetHeight;

if(window.offsetHeight - popupTop > 100) { // change 100 as needed
   // display below
}
else {
   // display above
}

为了找到元素的偏移顶部，您需要递归添加 parent.offsetTop 直到没有父级，如此答案：https ://stackoverflow.com/a/6780661/921204

注意：我没有测试window.offsetHeight跨浏览器的兼容性。您可能需要相同的多浏览器代码。除此之外，这几乎适用于所有浏览器。

于 2013-03-28T13:50:38.447 回答
-1

你可以看这里http://jqueryui.com/tooltip/。根据您的描述，我猜您需要一个工具提示。这个库会自动定位你的 div。

于 2013-03-28T14:20:59.497 回答