0

アップデート

jsFiddleを更新したところ、「ポップアップ」が発生し、中央に配置されないことがわかります。上から常に200pxです。

したがって、ユーザーが長いページを下にスクロールしてクリックしてポップアップを表示した場合、ポップアップはページの上部に戻ります。表示されている画面の中央ではなく、200ピクセルです。

http://jsfiddle.net/JYgcj/40/

以下の答えを試して、その結果で更新します

部分的にレイアウトに非表示のdivが含まれています

これが部分的です

javascript関数は、ajaxリクエストの結果を表示するためにこのdivを表示します

function showResultPopUpDiv(divId, title) {

    var popUpId = document.getElementById(divId);
    var popUpHeader = title;
    var originalDivHTML;
    var topPos = 200;
    var popUpWidth;
    var midPos;
    var leftPos;
    var spinnerOpts;

    //Insert header text & open pop up
    popUpId.style.display = "block";
    document.getElementById("ajaxResultPopUpHeaderText").innerHTML = popUpHeader;

    //Set position dimensions
    popUpWidth = popUpId.offsetWidth / 2;
    midPos = $(document).width() / 2;
    leftPos = midPos - popUpWidth;

    //Position pop up (center)
    popUpId.style.top = topPos + "px";
    popUpId.style.left = leftPos + "px";

    //Insert spinning loader code here
    ... //left out for brevity
}

ビューが1つの画面より長く、ユーザーが下にスクロールして送信ボタンをクリックした場合、このdivはポップアップしますが、ユーザーが上にスクロールしない限り表示されません。

ページが現在スクロールされている場所で、これをウィンドウの中央に正しく配置するにはどうすればよいですか。

この質問と私が調査した他の質問は、私にとってこれを解決していません。何か案は？

4

1 に答える 1

1

あなたが望むのは「固定」のCSS位置（CSS Positioning 101）のようです。これにより、ドキュメントに対してではなく、ビューポート (ブラウザー) に対して相対的にオブジェクトが固定されます。これは、上と左の動作に影響します。

次のようなものがあることを確認してください。

#ajaxResultPopUpHeaderText {
    position: fixed; /* Make the position fixed to the viewport,
    so it stays in the same place no matter how much the user scrolls */
}

ビューポートを中心にするには、ビューポートに対する位置を計算する必要があります。完全な JSFiddle (オリジナルからフォークされ、スクロール用のコンテンツとスクロール時にボタンを保持するためのスタイルが追加されています) にはすべての JavaScript が含まれていますが、jQuery を使用しているため$(window)、$(document).

    //Set position dimensions
    var popUpHeight = popUpId.offsetHeight / 2;
    var centrePos = $(window).height() / 2;
    topPos = centrePos - popUpHeight;
    popUpWidth = popUpId.offsetWidth / 2;
    midPos = $(window).width() / 2;
    leftPos = midPos - popUpWidth;

$(document)ドキュメントは通常、幅の 100% であるため、たまたま幅に対して問題なく動作しますが、$(window)とにかく使用する必要があります。

于 2012-05-19T18:59:36.470 に答える