offsetHeight y offsetWidth calcular incorrectamente en el primer evento onclick, no en el segundo

Question

He escrito la siguiente secuencia de comandos para mostrar un elemento oculto, luego corrijo su posición en el centro de la página.

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

Cuando esta función es llamada por un evento onclick, la offsetHeight y offsetWidth se calculan incorrectamente, por lo tanto no centrar el elemento correctamente. Si hago clic en el elemento onclick por segunda vez, offsetHeight y offsetWidth se calculan correctamente.

He intentado cambiar el orden en todos los sentidos que puedo imaginar, ¡y esto me está volviendo loco! ¡Cualquier ayuda es muy apreciada!

Answer 1

Supongo que su altura y ancho no están definidos en el elemento principal. Mira este violín donde funciona bien. Chico, soy inteligente. http://jsfiddle.net/mrtsherman/SdTEf/1/

respuesta Antiguo creo que esto se puede hacer mucho más simple. Está configurando las propiedades superior e izquierda al 50%. Esto colocará el elemento fijo ligeramente alejado del centro. Creo que estás tratando de volver a colocarlo en la posición correcta usando márgenes negativos. En su lugar, simplemente calcule los valores correctos superior/izquierdo desde el principio y no se preocupe por el margen. Aquí hay una solución jQuery, pero se puede adaptar fácilmente a js simples. También creo que su código actual no funcionará si la ventana se ha desplazado en absoluto.

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