基於查看端口的div定位

我想定位一個相對於瀏覽器窗口的查看端口的div。目前我有一些jQuery的彈出窗口，它們根據窗口大小動態地定位，但是由於它們是絕對定位的，它們基於頁面的頂部，所以當你向下滾動並點擊頁面中，彈出窗口位於頁面頂部，位於視口外...基於查看端口的div定位

如果您點擊「Redcat」項目，可以看到這裏。

有沒有辦法將這些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>

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

來源

2009-09-12 antonanton

也許你正在尋找的CSS { position: fixed }？

來源

2009-09-12 17:07:51 jrharshath

如果它是固定的或絕對的，它仍然將它定位到頁面的頂部，而不是視口的頂部。 – antonanton

噢，我忘了提及：IE對'{position：fixed}'提供了蹩腳的支持。我想你可以使用這個破解來修復它：http://tagsoup.com/cookbook/css/fixed/ – jrharshath

是的，但問題仍然是，當你使用fixed時，div的位置仍然相對於頂部該頁面，而不是視圖端口。 – antonanton

基於查看端口的div定位

回答

相關問題