Wie positioniert 400 x 400px popup-div relativ zu klicken Sie auf, halten in der Bildschirm-Ansicht

Vorzugsweise mit jQuery, da es so viel einfacher zu verstehen.

Den folgenden großen Werke für die horizontale. Das Problem liegt in der vertikalen werden kann abgeschnitten auf der Oberseite dass der Benutzer einen Bildlauf nach oben, um zu sehen, die ganze 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";}
    }

Dann lade ich so etwas wie

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

InformationsquelleAutor TrailDEX | 2011-01-28

  1. 1

    Sollte es ziemlich einfach,

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

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

    jquery:

    get offset, der das übergeordnete element , ich meine, klicken Sie auf element

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

    Dies sollte es tun.

    können hinzufügen, einige pixel nach Links und oben
    aber wenn er es tut, in der Nähe der Kante des Bildschirms, er werde nicht in der Lage, alles zu sehen, er will es zu berechnen, wenn es auf dem Bildschirm, und wenn es ist nicht, neu zu positionieren.

    InformationsquelleAutor kobe

  2. 0

    Etwas wie dies funktionieren sollte:

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

});

    InformationsquelleAutor codelove

Schreibe einen Kommentar