offsetHeight e offsetWidth che calcolano erroneamente sul primo evento onclick, non secondo

Question

Ho scritto il seguente script per visualizzare un elemento nascosto, quindi correggere la sua posizione al centro della pagina.

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

Quando questa funzione viene richiamata da un evento onclick, l'offsetHeight e offsetWidth sono calcolati in modo errato, quindi non centrare correttamente l'elemento. Se faccio clic sull'elemento onclick una seconda volta, offsetHeight e offsetWidth vengono calcolati correttamente.

Ho provato a cambiare l'ordine in ogni modo che posso immaginare, e questo mi sta facendo impazzire! Qualsiasi aiuto è molto apprezzato!

Answer 1

Immagino che l'altezza e la larghezza non siano definite sul genitore. Vedi questo violino dove funziona bene. Ragazzo, sono intelligente http://jsfiddle.net/mrtsherman/SdTEf/1/

Vecchio risposta penso che questo può essere fatto molto di più semplice. Stai impostando le proprietà superiore e sinistra al 50%. Questo metterà l'elemento fisso leggermente fuori dal centro. Penso che tu stia cercando di riportarlo nella posizione corretta usando margini negativi. Invece - calcola i valori iniziali/sinistro corretti dall'inizio e non preoccuparti del margine. Ecco una soluzione jQuery, ma può essere facilmente adattata a plain js. Penso anche che il tuo codice attuale non funzionerà se la finestra è stata scorsa a tutti.

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