Positionnement de div en fonction du port d'affichage

Question

Je voudrais positionner une div par rapport à la vue port d'une fenêtre de navigateur. Actuellement, j'ai des popups avec du jQuery qui sont positionnés de manière dynamique en fonction de la taille de la fenêtre, cependant, étant donné qu'ils sont positionnés absolument, ils sont basés sur le haut de la page, donc lorsque vous faites défiler vers le bas, et cliquez sur un projet plus bas sur la page, le popup est positionné en haut de la page, en dehors de la vue...

cela peut être vu ici surtout si vous cliquez sur le projet "Redcat". http://www.samuelfarfsing.com/test.php

Y a-t-il un moyen de positionner ces divs par rapport à la position actuelle de la vue port?

Html:

    Fermer ×

    Description

Jquery:

$(document).ready(function() {
//Trouver & Ouvrir

$(".projectThumb").click(function(){
    $("#backgroundPopup").show();
        htmlName = $(this).find("img").attr("name");
        $("#data").load("/content/" + htmlName + ".html", null, function(){
            //Définir les 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;

            //Définir dimensions du popup
            container.css("width" , popupWidth);
            container.css("height" , popupHeight);

            //Définir CSS du popup
            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) });

    //Diaporama d'images pour masquer le reste
            $(".container").each(function(){
            $(".project img", this).hide().filter(":first").show();
        });
    });
});

Answer 1

Peut-être cherchez-vous du CSS { position: fixe } ?