div positionnement basé sur le port de vue

Question

Je voudrais positionner un div par rapport au port d'affichage d'une fenêtre de navigateur. Actuellement, j'ai quelques popups avec quelques jquery qui sont positionnés dynamiquement en fonction de la taille de la fenêtre, mais comme ils sont positionnés en absolu, ils sont basés en haut de la page, donc quand vous faites défiler vers le bas, cliquez sur un projet plus bas. page, le popup est positionné en haut de la page, hors de la fenêtre ...

cela peut être vu ici surtout si vous cliquez sur le projet "Redcat".

Y at-il un moyen de positionner ces divs par rapport à la position actuelle de la fenêtre?

Html:

<div class="container"> 
    <div class="project"> 
    <a class="close">Close &times;</a> 
    <img src="/img/lova_popup_slide01.jpg" width="500" height="530" alt="" /> 
    </div> 
    <div class="description"><p>Description</p></div> 
</div> 

Jquery:

$(document).ready(function() { 
//Find & Open 

$(".projectThumb").click(function(){ 
    $("#backgroundPopup").show(); 
     htmlName = $(this).find("img").attr("name"); 
     $("#data").load("/content/" + htmlName + ".html", null, function(){ 
      //Set Variables 
      var container = $(".container"); 
      var project = $(".project"); 
      var popupWidth = container.find(".project img:first").width(); 
      var popupHeight = container.find(".project img:first").height()+35; 
      var windowWidth = document.documentElement.clientWidth; 
      var windowHeight = document.documentElement.clientHeight; 

      //Set popup dimensions 
      container.css("width" , popupWidth); 
      container.css("height" , popupHeight); 

      //Set popup CSS 
      container.css({"position": "absolute", "background": "#000", "top": (windowHeight/2) - (popupHeight/2) + "px", "left": (windowWidth/2) - (popupWidth/2) + "px", "z-index": "2" }); 
      project.css({"width": (popupWidth), "height": (popupHeight) }); 

    //Slideshow Image to hide rest 
      $(".container").each(function(){ 
      $(".project img", this).hide().filter(":first").show(); 
     }); 
    }); 
}); 

Answer 1

vous êtes peut-être à la recherche CSS { position: fixed }?