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();
"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 fails after the page was scrolled down because pageX/Y is relative to the page and not visible part.
Any other ideas?
以上就是How to center a popup-div below the mouse cursor but keep it completely inside the window?的详细内容，更多请关注web前端其它相关文章！