div positioning based on view port

Question

I would like to position a div relative the the view port of a browser window. Currently I have some popups with some jquery that are dynamically getting positioned based on the window size, however since they are absolute positioned, they are based off the top of the page, so when you scroll down, and click on a project lower on the page, the popup is positioned at the top of the page, out of the viewport…

this can be seen here especially if you click on the "Redcat" project. http://www.samuelfarfsing.com/test.php

Is there a way to position these divs relative to the current position of the viewport?

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

maybe you are looking for CSS { position: fixed } ?