基于查看端口的div定位

  • Z时代
  • 2024-01-10
  • 分类：问答

我想定位一个相对于浏览器窗口的查看端口的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(); 
     }); 
    }); 
});

回答：

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

以上是 基于查看端口的div定位 的全部内容， 来源链接： utcz.com/qa/258658.html

回到顶部