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);});

回答1:

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.

回答2:

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});

});

来源：https://stackoverflow.com/questions/4825763/how-to-position-400-x-400px-popup-div-relative-to-click-keeping-in-screen-view