offsetHeight и offsetWidth неправильно вычисляются при первом событии 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";
}

когда эта функция вызывается событием onclick, offsetHeight и offsetWidth вычисляются неправильно, что не позволяет правильно центрировать элемент. Если я нажму элемент onclick во второй раз, offsetHeight и offsetWidth вычислят правильно.

Я попытался изменить порядок всеми способами, которые я могу себе представить, и это сводит меня с ума! Любая помощь очень ценится!

6
height hidden javascript offsetwidth onclick

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