7

非表示の要素を表示し、その位置をページの中央に固定する次のスクリプトを作成しました。

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

この関数がonclickイベントによって呼び出されると、offsetHeightとoffsetWidthが正しく計算されないため、要素が正しく中央に配置されません。onclick要素をもう一度クリックすると、offsetHeightとoffsetWidthが正しく計算されます。

私は想像できるあらゆる方法で順序を変更しようとしました、そしてこれは私を夢中にさせています！どんな助けでも大歓迎です！

4

1 に答える 1

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');
});
于 2011-09-13T16:32:34.050 に答える