如果底部没有适当的空间，弹出窗口应显示在元素顶部

Question

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

我可以更新顶部位置，但我只希望在没有适当空间的情况下，否则就可以了。

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

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

我用来获取位置的代码：

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

Answer 1

看看这个 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(); 
    });