javascript - llamar - offsetHeight y offsetWidth calculando incorrectamente en el primer evento onclick, no en segundo

funcion click en javascript

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 un evento onclick llama a esta función, offsetHeight y offsetWidth se calculan incorrectamente, por lo que no se centra 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 padre. Mira este violín donde funciona bien. Chico, soy inteligente. http://jsfiddle.net/mrtsherman/SdTEf/1/

Respuesta anterior Creo que esto se puede hacer de una manera 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'');
});