3

Edit 1 (reduced the problem to a jsfiddle):

I removed some unnecessary detail of the original problem.

I am trying to center a popup in the window. Because of how it will be used in the original context, the popup's width will be dynamic. Its only contents will be text, but it won't be known how long that text will be. In most cases it will fit on one line, but if the text is longer and the user has a lower screen resolution, it may need to occupy 2 lines, and I would like to keep all the text on the screen. The text is static in the jsfiddle, so that is obviously not what is causing the issue. I'm just clarifying in case anyone is wondering why I haven't tried setting a width for the popup. I'm using jquery to get the width using outerWidth() and $(window).resize() to trigger the centering function when the browser window is resized.

It works fine as long as the popup's width is smaller than the element containing it. I would like for the popup to just take the full width of its container if it is made small enough that the text has to go to two lines. As you will see in the video below, if you make a large adjustment in the browser window size, the width isn't always being reported correctly, which is causing the element to have a space on the left side instead of being centered. In other words, outerWidth() is reporting a width different than what is being rendered by the browser.

See this video for a demonstration of the problem: http://youtu.be/Tnq6nrrDKvw

This is happening for me in Firefox, Chrome, IE, Opera, and Safari. Perhaps it is a problem with jquery's outerWidth function. Or perhaps I don't understand something about how it is supposed to work. Is there another method to accomplish what I'm trying to do?

Here is the javascript, nothing too complicated:

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

The only important css is that the popup has position: fixed and no set width or height. If I set the width of the popup, it sticks along the left side like it should, but the text extends beyond the right boundary. I would like to keep all the text on the screen and have it take the full width and jump some text down to the next line if needed. When the width gets low enough for that to happen, I just want the notice to occupy the entire width of the viewing area.

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

Edit 2 (the solution):

This is the solution I ended up using thanks to the help I got.

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

Instead of repositioning the popups, the popups are left with an auto width and display: inline-block. They are contained inside a div with fixed positioning. When the window is resized, the containing div is resized and repositioned. You can specify how much horiziontal space you want outside of the popups when the windows is reduced by changing the number in the function. There might be a way to do this with css only, but I'm just happy to have something functional at the moment.

4

1 回答 1

1

所以我可能会误解，但你根本不需要 JS 来达到这种效果。这似乎是一个用 JS-hammer 而不是使用一些 CSS-fu 来击败 sh!t 的案例。我在下面的 HTML 中包含了两个示例，一个仅包含一行文本，一个包含更多（当我将其插入小提琴时为 3 行）

我没有该死的小提琴帐户，所以这是您小提琴中的相关部分：

1）不需要JS。（尤其是像 outerwidth 等可能导致不必要的回流/重绘的东西。

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;
}
于 2013-08-08T22:16:51.893 回答