定位DIV

Question

我正在寻找解构我为网站上的灯箱插件找到的一些 javascript。

我很好奇是否有人可以帮助解码这段脚本？我想将它实现到我的 jquery 中，但需要辨别我可以使用我不能使用的东西。

目前我的问题是我的定位 jquery 将我的 div 与初始加载时看到的文档的垂直中心对齐。因此，如果我向下滚动页面的一半，然后单击要弹出的项目，它将相对于文档顶部的某个位置加载弹出窗口，而不是相对于视口中心加载，而不管文档的位置如何。另外，如果它对于屏幕来说太大了，它将在中间加载，并且顶部和底部将被切断，使这些部分不可见，而我发现的这个 javascript 会将弹出 div 定位在距离顶部 10px 的位置，如果它太大了.

找到 Javascript：

//Vertical position of div element: Either centered, or if element height larger than viewpoint height, 10px from top of viewpoint  
var scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset
var topposition=(docheight>objheight)? scroll_top+docheight/2-objheight/2+"px" : scroll_top+10+"px" 
var docwidth=(ie)? this.standardbody.clientWidth : window.innerWidth-this.scrollbarwidth
var docheight=(ie)? this.standardbody.clientHeight: window.innerHeight
var docheightcomplete=(this.standardbody.offsetHeight>this.standardbody.scrollHeight)? this.standardbody.offsetHeight : this.standardbody.scrollHeight //Full scroll height of document
var objheight=divobj.offsetHeight //height of div element

divobj.style.top=Math.floor(parseInt(topposition))+"px"

我正在使用的当前 Jquery：

$(document).ready(function() {
$(".projectThumb").click(function(e){
    $("#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) });

        });
    });
});

提前致谢！

Answer 1

试试这个：

var x = ($(window).width() / 2 - container.width() / 2) + $(window).scrollLeft();
var y = ($(window).height() / 2 - container.height() / 2) + $(window).scrollTop();

然后使用 y 作为你的最高值，使用 x 作为你的左值。