ページがスクロール可能な場合でも画面上にdivを配置する

Question

これには簡単な解決策が必要です。私は、私が探している効果を達成するためにjQueryを使って作業しようとしていますが、それだけではうまくいきません...また、問題のCSS解決策があると思われます。

#popup { 
position: absolute; 
left: 0px; 
top: 0px; 
right: 0px; 
bottom: 0px;} 

それは、オーバーレイのような画面をカバーしています...私は別と呼ばれる#pnlEditOverlayを持って、このdivの内側に持っているボックスがされている：

私は、次のCSSで「ポップアップ」と呼ばれるdiv要素を持っています通知メッセージ、または編集フォームまたは同様のもの。

pnlEditOverlayは、私はそれがすべてを覆うように、ドキュメントの高さに#popupの高さを拡張するためにjQueryのを使用してページ上の垂直中心に

をしようとしていますものです：

$("#popup").css('height', $(document).height()); 

私の問題は、#pnlEditOverlayを垂直方向にセンタリングしたいのですが、ページがスクロールできる大きさであってもページ上に配置したいのです。

私はこのdiv要素を再配置するためにjQueryを使用している：

var offset = $("#pnlEditOverlay").offset(); 

     var topPadding = 75; 
     $(window).scroll(function() { 
      if ($(window).scrollTop() > offset.top) { 
       $("#pnlEditOverlay").stop().animate({ 
        marginTop: $(window).scrollTop() - offset.top + topPadding 
       }); 
      } else { 
       $("#pnlEditOverlay").stop().animate({ 
        marginTop: 75 
       }); 
      }; 
     }).scroll(); 

は、しかし、これはまさに私が欲しいものではありません。ページがスクロールされたときにのみ位置が変わります。ユーザーが既にページの途中までスクロールしているとき、divはスクロールするまで非表示になります...

いずれにしても。私はそこにエレガントなCSSソリューションがあるのだろうかと思っていました。 私は単純に、ページがスクロールされていても、ページにデッドセンタを置いています。 divのスタイルを設定するのにjQueryを使っても問題ありませんが、はクリックイベントの実装を避けたいと考えています divが表示される可能性のあるたくさんのボタンがあるためです。

質問があるのは、CSSスタイルか、ページをスクロールしてもdivを垂直に中央に置いてそこに保持する小さなjQueryですか？

ありがとうございました

Answer 1

本当に単純なCSSソリューションがあります。まず、popupのためにこれを使用します。

#popup 
{ 
position:fixed; 
height:100%; 
width:100%; 
} 

とこれはあなたのためにoverlay：

#overlay 
{ 
position:fixed; 
top:50%; 
left:50%; 
margin-top:-y; 
margin-left:-x; 
} 

XとYそれぞれ自分のoverlayのdivの半分幅と高さです。したがって、このdivの高さと幅を知る必要があります。

これは、ページがスクロールされても、すべての問題を処理します。

Answer 2

ポップアップを開いたときにウィンドウの最初のスクロールオフセットを考慮する必要があります。絶対位置0のままにする代わりに、Javascriptを使用して、ウィンドウの最前面に表示されるピクセルの現在の値に再配置する必要があります。私はこれがoffsetHeightパラメータだと信じていますが、私はテストしていません。

また、FWIWでは、Jqueryの「モーダルダイアログ」オプションはありません。これは、あなたが期待しているものをそのまま使用しますか？それは何らかの理由で機能しませんでしたか？