0

プロジェクトの 1 つにフィードバック システムを作成しています。私のターゲットデバイスはiPadです。基本的に何が起こるかは、ajax を介してページに呼び出された div であり、その下のコンテンツをオーバーレイすることになっています。私はその部分を機能させています。

私がやりたいことは、div をビューポートの中央にロックすることです。position:fixed間違った位置にロックされることを除いて、機能する要素を試しました。ビューポートの初期位置を中心にしているようです。長いページの一番下までスクロールしてフィードバック ウィンドウを呼び出しても、まだ一番上にあります。

Ajax ページ (これは、ページが呼び出されたときに実行されます)

$(document).ready(function(){
  $(".popup").css({
    top: "50%",
    left: "50%",
    marginLeft: -$(".popup").width() / 2,
    marginTop: -$(".popup").height() / 2
  });
});

ビューポートの上部を見つけることができれば、これを正しく機能させることができると思います。

http://www.appelsiini.net/projects/viewportを調べましたが、実際には問題は解決しません。

正しい方向への助け、アドバイス、または指針をいただければ幸いです。ありがとう！

4

2 に答える 2

5

ウィンドウの左上隅を基準にして、どれだけ下にスクロールしても、固定の位置が適用されます(これが必要だと思います)。

そう：

.popup {
   position:fixed;
   top:20px;
   left:40px;
   right:40px;
}

まず、ポップアップをアドレスバーから 20px に配置します (つまり、一番下までスクロールしたとしても)。

次に、両方をleftANDに設定rightすると、ウィンドウの両側から 40px (または指定したもの) で開始および終了するように固定要素が「ストレッチ」されます。これは、このポップアップ div を中央に配置する便利な方法です。

ポップアップをウィンドウの幅に基づいて拡大するのではなく、固定サイズにする必要がある場合は、左と右の両方を (おそらくゼロに) 設定してから、この div 内に で別の div を作成しmargin:0 auto、その内側の div を中央に配置することができます。固定された外側の div 内。

PS と の両方を設定leftできるのと同様に、 と の両方をright設定することもでき、対応する結果が得られます。ただし、固定の高さが必要な場合は、トリックを使用して垂直方向に中央揃えすることはできません。topbottommargin:auto

于 2012-12-04T19:02:54.760 に答える
0

それが事実かどうかはわかりませんが、$(".popup")最初に によって非表示になっている場合display:none、ページの読み込み時に幅と高さがゼロになります。

于 2012-12-04T19:10:15.443 に答える