offsetHeight i offsetWidth niepoprawnie obliczające pierwsze zdarzenie onclick, nie drugie

Question

Napisałem poniższy skrypt, aby wyświetlić ukryty element, a następnie popraw jego pozycję na środku strony.

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"; 
} 

Gdy ta funkcja jest wywoływana przez zdarzenie onclick The offsetHeight i offsetWidth obliczono nieprawidłowe, co nie jest prawidłowo centrowania elementu. Jeśli kliknę element onclick po raz drugi, offsetHeight i offsetWidth obliczają poprawnie.

Próbowałem zmienić kolejność w każdy możliwy sposób, jaki mogę sobie wyobrazić, a to doprowadza mnie do szału! Wszelaka pomoc jest bardzo doceniana!

Answer 1

Zgaduję, że twój wzrost i szerokość nie są zdefiniowane w rodzicu. Zobacz to skrzypce, gdzie działa dobrze. Chłopie, jestem mądry. http://jsfiddle.net/mrtsherman/SdTEf/1/

Stara odpowiedź Myślę, że można to zrobić o wiele prościej. Ustawiasz górne i lewe właściwości na 50%. Spowoduje to lekki element stały ze środka. Myślę, że próbujesz następnie przywrócić go do właściwej pozycji, używając ujemnych marginesów. Zamiast tego - po prostu obliczyć prawidłowe górne/lewe wartości od początku i nie martw się o margines. Oto rozwiązanie jQuery, ale można je łatwo dostosować do zwykłego js. Uważam też, że twój obecny kod nie zadziała, jeśli okno zostało przewinięte w ogóle.

//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'); 
});