[英]div positioning based on view port
我想將div相對於瀏覽器窗口的視口定位。 目前我有一些彈出窗口,其中一些jquery根據窗口大小動態定位,但由於它們是絕對定位的,因此它們基於頁面頂部,因此當您向下滾動時,單擊下方的項目頁面,彈出窗口位於頁面頂部,在視口外...
這可以在這里看到,特別是如果你點擊“Redcat”項目。 http://www.samuelfarfsing.com/test.php
有沒有辦法相對於視口的當前位置定位這些div?
HTML:
<div class="container">
<div class="project">
<a class="close">Close ×</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 }
?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.