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 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前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏