offsetHeightとoffsetWidthが最初のonclickイベントで間違って計算されています。

Question

隠し要素を表示するために次のスクリプトを作成し、その位置をページの中央に固定しました。この機能は、onclickイベントによって呼び出され

は

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とoffsetWidthは、このように正しく要素のセンタリングない、誤って計算されています。 onclick要素をもう一度クリックすると、offsetHeightとoffsetWidthが正しく計算されます。

私は想像できるあらゆる方法で注文を変更しようとしましたが、これが私を狂わせてしまいます！どんな助けでも大歓迎です！

Answer 1

私はあなたの身長と幅が親に定義されていないと推測しています。それがうまく動作するこのフィドルを見てください。私はスマートです。 http://jsfiddle.net/mrtsherman/SdTEf/1/

古い回答 これはもっと簡単に行うことができると思います。上部と左のプロパティを50％に設定しています。これにより、固定された要素が中心から少し離れて配置されます。私はあなたが負のマージンを使って正しい位置に戻そうとしていると思います。代わりに、最初から正確な上/左の値を計算し、マージンについて心配する必要はありません。ここにはjQueryソリューションがありますが、それは簡単にjsに適合させることができます。また、ウィンドウがまったくスクロールされていれば、現在のコードは機能しないと思います。

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