javascript - 如果底部没有适当的空格，则弹出框应显示在元素的顶部

如果顶部没有适当的空间，我想在元素顶部显示弹出窗口。当前，它隐藏在窗口内，如下图所示：


我可以更新最高位置，但我只想在没有适当空间的情况下使用，否则就可以了。

请让我知道如何确定单击位置是否在窗口边缘附近。

JSFiddle链接：http://jsfiddle.net/g4g4negf/

我用来获取职位的代码：

$(document).ready( function() {
$('.clickme').on('click', function(e) {
       $('#popup').offset({ top: e.pageY, left:  e.pageX}).fadeIn();
});

最佳答案

查看this JSFiddle

要检查单击位置是否靠近窗口边缘，必须获取窗口的高度（$(window).height()）和滚动位置（window.pageYOffset）。通过将这两个值相加，可以找到窗口的滚动位置。然后将此总和与e.pageY+$("#popup").height()（这是单击位置的高度和弹出窗口的高度之和）进行比较。如果后者小于前者，则表示可以显示弹出窗口。如果(e.pageY+$("#popup").height())>($(window).height()+window.pageYOffset)表示弹出窗口将溢出窗口的底部边框，则其顶部偏移应更改为e.pageY-$('#popup').height()。

这是完整的功能：

$('.clickme').on('click', function(e) {
    var h;
    if((e.pageY+$('#popup').height())<($(window).height()+window.pageYOffset)) h=e.pageY;
    else h=e.pageY-$('#popup').height();
           $('#popup').offset({ top: h, left:  e.pageX}).fadeIn();
    });