offsetHeight и offsetWidth неправильно вычисляются при первом событии onclick, а не во втором - PullRequest
Новая
       32

offsetHeight и offsetWidth неправильно вычисляются при первом событии onclick, а не во втором

6 голосов
/ 13 сентября 2011

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

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 вычисляются правильно.

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

1 Ответ

1 голос
/ 13 сентября 2011

Я предполагаю, что ваш рост и ширина не определены для родителя. Смотрите эту скрипку, где она работает нормально. Мальчик, я умный. 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');
});
...