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表示左值。

定位DIV

1 个答案: