4

我想相对于浏览器窗口的视口定位一个 div。目前，我有一些带有一些 jquery 的弹出窗口，它们根据窗口大小动态定位，但是由于它们是绝对定位的，它们基于页面顶部，所以当你向下滚动时，点击下方的项目页面，弹出窗口位于页面顶部，在视口之外......</p>

这可以在这里看到，特别是如果您单击“Redcat”项目。 http://www.samuelfarfsing.com/test.php

有没有办法将这些 div 相对于视口的当前位置定位？

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>

查询：

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

1 回答 1

1

也许您正在寻找 CSS { position: fixed }？

于 2009-09-12T17:07:51.610 回答