3

編集1（問題をjsfiddleに減らしました）：

元の問題の不要な詳細を削除しました。

ポップアップをウィンドウの中央に配置しようとしています。元のコンテキストでの使用方法により、ポップアップの幅は動的になります。その唯一のコンテンツはテキストですが、そのテキストの長さはわかりません。ほとんどの場合、1 行に収まりますが、テキストが長く、ユーザーの画面解像度が低い場合は、2 行を占める必要がある場合があり、すべてのテキストを画面に表示したいと考えています。テキストは jsfiddle で静的であるため、明らかに問題の原因ではありません。ポップアップの幅を設定しようとしなかった理由を誰かが疑問に思っている場合に備えて、明確にしています。jquery を使用して、outerWidth() と $(window).resize() を使用して幅を取得し、ブラウザ ウィンドウのサイズが変更されたときにセンタリング機能をトリガーしています。

ポップアップの幅がそれを含む要素よりも小さい限り、うまく機能します。テキストが2行にならなければならないほど小さくされている場合、ポップアップがコンテナの全幅を取るようにしたいと思います。下のビデオでわかるように、ブラウザー ウィンドウのサイズを大幅に調整すると、幅が常に正しく報告されず、要素が中央に配置されずに左側にスペースができてしまいます。つまり、outerWidth() は、ブラウザーによってレンダリングされているものとは異なる幅を報告しています。

問題のデモについては、このビデオを参照してください: http://youtu.be/Tnq6nrrDKvw

これは、Firefox、Chrome、IE、Opera、および Safari で発生しています。おそらくjqueryのouterWidth関数の問題でしょう。あるいは、それがどのように機能するのかについて何かを理解していないのかもしれません。私がやろうとしていることを達成する別の方法はありますか?

ここに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 は、ポップアップに position: fixed があり、幅や高さが設定されていないことです。ポップアップの幅を設定すると、本来のように左側にくっつきますが、テキストは右側の境界を超えて伸びます。画面上のすべてのテキストを保持し、必要に応じて全幅でテキストを次の行にジャンプさせたいと思います。幅が十分に狭くなったら、通知が表示領域の幅全体を占めるようにしたいだけです。

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

編集2（解決策）：

これは、私が得た助けのおかげで、最終的に使用したソリューションです。

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

ポップアップの位置を変更する代わりに、ポップアップは自動幅と表示: インライン ブロックのままになります。これらは、位置が固定された div 内に含まれています。ウィンドウのサイズが変更されると、それを含む div のサイズと位置が変更されます。関数の数値を変更することで、ウィンドウが縮小されたときにポップアップの外側に必要な水平スペースの量を指定できます。css のみでこれを行う方法があるかもしれませんが、現時点では機能するものがあることをうれしく思います。

4

1 に答える 1

1

だから私は誤解しているかもしれませんが、この効果のためにJSはまったく必要ありません. これは、CSS fu を使用する代わりに、JS ハンマーで何かを打ち負かす場合のようです。以下の HTML に 2 つの例を含めましたが、1 行のテキストだけが含まれています。

私はいまいましいフィドルアカウントを持っていないので、ここにあなたのフィドルからの関連部分があります:

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 に答える