Позиционирование DIV

Question

Я ищу, чтобы деконструировать некоторый javascript, который я нашел для плагина lightbox на сайте.

Мне было любопытно, может ли кто-нибудь помочь в расшифровке этого сценария? Я хотел бы реализовать его в своем jquery, но вам нужно различить, что я могу использовать, что не могу.

В настоящее время моя проблема заключается в том, что мой позиционирующий jquery выравнивает мой div в вертикальном центре документа, как показано на начальной загрузке. Поэтому, если я прокручиваю половину страницы и нажимаю на проект, чтобы всплывать, он загружает всплывающее окно относительно верхней части документа где-то в отличие от загрузки по отношению к центру области просмотра независимо от положения документа. Кроме того, если он слишком большой для экрана, он будет загружаться посередине, а верхняя и нижняя будут обрезаны, чтобы эти части не были видны, тогда как этот javascript, который я нашел, будет позиционировать popup 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(); 

Затем используйте у для верхнего значения и х для левого значения.