Неожиданное поведение при попытке центрировать элемент динамической ширины по горизонтали с использованием externalWidth() и $(window).resize()

Question

Редактировать 1 (уменьшил проблему до jsfiddle):

Я удалил некоторые ненужные детали оригинальной проблемы.

Я пытаюсь центрировать всплывающее окно в окне. Из-за того, как он будет использоваться в исходном контексте, ширина всплывающего окна будет динамической. Его единственным содержимым будет текст, но неизвестно, как долго этот текст будет. В большинстве случаев он умещается в одну строку, но если текст длиннее и у пользователя более низкое разрешение экрана, возможно, ему потребуется занять 2 строки, и я хотел бы сохранить весь текст на экране. Текст является статическим в jsfiddle, так что это, очевидно, не то, что вызывает проблему. Я просто разъясняю, если кому-то интересно, почему я не пытался установить ширину для всплывающего окна. Я использую jquery для получения ширины, используя externalWidth() и $(window).resize(), чтобы вызвать функцию центрирования при изменении размера окна браузера.

Он работает нормально, если ширина всплывающего окна меньше, чем элемент, содержащий его. Я хотел бы, чтобы всплывающее окно просто занимало всю ширину своего контейнера, если оно сделано достаточно маленьким, чтобы текст приходился на две строки. Как вы увидите на видео ниже, если вы сделаете большую регулировку размера окна браузера, ширина не всегда будет сообщаться правильно, из-за чего элемент будет иметь место слева, а не центрироваться. Другими словами, externalWidth() сообщает о ширине, отличной от отображаемой браузером.

Смотрите это видео для демонстрации проблемы: http://youtu.be/Tnq6nrrDKvw

Это происходит для меня в Firefox, Chrome, IE, Opera и Safari. Возможно, это проблема с функцией externalWidth jquery. Или, может быть, я не понимаю, как это должно работать. Есть ли другой способ выполнить то, что я пытаюсь сделать?

Вот JavaScript, ничего сложного:

function center_horizontally(id)
{
    var windowWidth = document.documentElement.clientWidth;
    var popupWidth = $(id).outerWidth();

    var new_left = Math.max(0, windowWidth/2 - popupWidth / 2);

    ...

    $(id).css('left', new_left + 'px');
}

$(function(){
    $(window).resize(function() {
        center_horizontally('#popup');
    });

    center_horizontally('#popup');
});

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

http://jsfiddle.net/dnag/qHjVG/5/

Изменить 2 (решение):

Это решение, которое я в конечном итоге использовал благодаря помощи, которую я получил.

http://jsfiddle.net/dnag/qHjVG/44/

Вместо того, чтобы перемещать всплывающие окна, всплывающие окна остаются с автоматической шириной и отображают: inline-block. Они содержатся внутри div с фиксированным расположением. Когда размер окна изменяется, размер содержащего div изменяется и изменяется. Вы можете указать, сколько горизонтального пространства вы хотите за пределами всплывающих окон, когда окна уменьшены, изменив число в функции. Может быть, есть способ сделать это только с помощью css, но я просто счастлив, что сейчас у меня есть что-то функциональное.

Answer 1

Так что я могу неправильно понять, но для этого вам вообще не нужен JS. Это похоже на случай выбивания чего-то с помощью молотка JS вместо использования CSS-фу. Я включил два примера в свой HTML ниже, один с одной строкой текста, один с более чем этим (3 строки, когда я подключил его к скрипке)

У меня нет чертового аккаунта на скрипке, так что вот соответствующие фрагменты из вашей скрипки:

1) JS не требуется. (особенно не такие вещи, как externalwidth и др., которые могут вызвать ненужные перерисовки / перерисовки.

2) HTML

<div id="popup">
    This is some sample text, just a little bit of sample text.
</div>
<div id="popup" style="top:120px;">
    This is some sample text, just a little bit of sample text.
    This is some sample This is some sample text, just a little bit of sample text.
    This is some sample This is some sample text, just a little bit of sample text.
    This is some sample 
</div>

3) CSS

#popup {
  background: #FFF;
  position: fixed;
  top: 50px;
  left: 0;
  border: 1px solid #000;
  box-shadow: 0 0 3px #CCC;
  padding: 10px; 
  width:auto;
  max-width:100%;
}

--EDIT-- ALT версия по центру, как подразумевается в верхней части вопроса:

HTML

<div id="popupWrapper">
    <div id="popup">
        This is some sample text, just a little bit of sample text. little bit 
    </div>
    <div id="popup">
        This is some sample text, just a little bit of sample text. little bit of s little bit of s little bit of s
    </div>
    <div id="popup" style="top:120px;">
        This is some sample text, just a little bit of sample text.
         This is some sample This is some sample text, just a little bit of sample text.
         This is some sample This is some sample text, just a little bit of sample text.
         This is some sample 
    </div>
</div>

CSS

#popupWrapper {
    width: 100%;
    text-align:center;
    position:absolute;
}

#popup {
    background: #FFF;
    top: 50px;
    border: 1px solid #000;
    box-shadow: 0 0 3px #CCC;
    padding: 10px;
    max-width:100%;
    display: inline-block;
}