How to position 400 x 400px popup div relative to click, keeping in screen view

Preferably with jQuery since it's so much easier to understand.

The following works great for horizontal. The issue is vertical can be cut off on top requiring the user to scroll up to see the entire popup.

function pop_IT(X,event){
    dist_to_right_edge = $('body').innerWidth()-(x-$.scrollbarWidth());
    dist_to_bottom = $(window).height()-y;
    X=$('#'+X).get(0);
    X.style.left = 5+x+"px";
    X.style.top = 5+y+"px";
    if(dist_to_right_edge < (X.offsetWidth+5)){X.style.left = x - X.offsetWidth-5+"px";}
    if(dist_to_bottom < (开发者_如何学运维X.offsetHeight+5)){X.style.top = y - X.offsetHeight-5+"px";}
    }

Then I load something like

$('#object').load('../whatever.php',function(event){pop_IT('object',event);});

It should be pretty simple

<div class="popup" > test</div>

.popup
{
 position:absolute;
 width:400px;
 height:400px;
}

jquery:

get offset of the parent element , i mean click element

$("#yourclickdiv").click(function (e) {
  var offset = $(this).offset();
  $(#popup).css('left',offset.left);    
  $(#popup).css('top',offset.top);
});

This should do it.

Something like this should work:

$(document).click(function (e) {

  var x = e.clientX,
  y = e.clientY,
  width = $(window).width(),
  height = $(window).height();

  if( x > width - 400 ) x -= 400;
  if( y > height - 400 ) y -= 400;

  $('#popup').css({'top':y,'left':x});

});