How to center a popup-div below the mouse cursor but keep it completely inside the window?

i am trying to display a popup-div below the mouse cursor, but it should be completely inside the visible area. Display the div below the mouse cursor worked:

var popupHeight = $("#popup").height();
var popupWidth = $("#popup").width();
$("#popup").css({
    "position" : "absolute",
    "top" : lastClickPosition.pageY - (popupHeight/2),
    "left" : lastClickPosition.pageX - (popupWidth/2))
});

The problem with this simple approach is that the popup-div may be partly outside the screen. So I tried to calculate the minimal and maximal offsets for it to stay within the screen:

Math.min(Math.max(0, lastClickPosition.pageY - (popupHeight/2)), 
         windowHeight - popupHeight - 20)+"px"

But this approach 开发者_StackOverflow中文版fails after the page was scrolled down because pageX/Y is relative to the page and not visible part.

Any other ideas?

You need to add in the scrollTop of the window. See scrollTop

$(window).scrollTop(); // this is the scroll distance from the top

The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very top, or if the element is not scrollable, this number will be 0.