offsetHight ve offsetWidth, ilk onclick olayında yanlış hesaplanıyor, ikinci değil

Question

Gizli bir öğeyi görüntülemek için aşağıdaki komut dosyasını yazdım, sonra sayfanın konumuna getirin. Bu fonksiyon, bir Onclick olayıyla adlandırılır

function popUp(id,type) { 
var popUpBox = document.getElementById(id); 

popUpBox.style.position = "fixed"; 
popUpBox.style.display = "block"; 

popUpBox.style.zIndex = "6"; 

popUpBox.style.top = "50%"; 
popUpBox.style.left = "50%"; 

var height = popUpBox.offsetHeight; 
var width = popUpBox.offsetWidth; 
var marginTop = (height/2) * -1; 
var marginLeft = (width/2) * -1; 

popUpBox.style.marginTop = marginTop + "px"; 
popUpBox.style.marginLeft = marginLeft + "px"; 
} 

, offsetHeight ve offsetWidth böylece doğru elemanının merkezleme olup, yanlış hesaplanır. Onclick öğesine ikinci kez tıklarsam, offsetHeight ve offsetWidth doğru bir şekilde hesaplar.

Siparişi değiştirdiğim her şekilde değiştirmeyi denedim ve bu beni deli ediyor! Herhangi bir yardım çok takdir edilir!

Answer 1

Uzunluğunuzun ve genişliğinin üstte tanımlanmadığını tahmin ediyorum. İyi çalıştığın bu kemanı gör. Oğlum ben akıllıyım. http://jsfiddle.net/mrtsherman/SdTEf/1/

Eski Cevap Bunu daha basit bir çok yapılabilir düşünüyorum. Üst ve sol özellikleri% 50 olarak ayarlıyorsunuz. Bu, sabit elemanı merkezden hafifçe çıkarır. Negatif kenar boşluklarını kullanarak doğru konuma geri çekmeye çalıştığınızı düşünüyorum. Bunun yerine - sadece başlangıçtan doğru üst/sol değerleri hesaplayın ve marj hakkında endişelenmeyin. İşte bir jQuery çözümü, ancak sade js'ye kolayca uyarlanabilir. Ayrıca, pencerenin hiç kaydırılmamış olması durumunda mevcut kodunuzun çalışmadığını düşünüyorum.

//this code will center the following element on the screen 
$('#elementid').click(function() { 
    $(this).css('position','fixed'); 
    $(this).css('top', (($(window).height() - $(this).outerHeight())/2) + $(window).scrollTop() + 'px'); 
    $(this).css('left', (($(window).width() - $(this).outerWidth())/2) + $(window).scrollLeft() + 'px'); 
});