1

これが私がやりたいことです: ユーザーがリンクをクリックしたときに表示されるポップアップウィジェットがあります。

私が必要とするのは、ユーザーが上下にスクロールしても、このウィジェットを画面の中央に配置することですが、ポップアップが表示された後にページをスクロールするのを止めないでください。

ウィジェットが追加される場所がわからない (動的に作成される) ため、CSS ソリューションは私には適していないと思います。

ウィジェットはjQueryで書かれています

これは、ユーザーがリンクをクリックしたときに現在ポジショニングを行っているコードです。

$(this).css({
        position: 'absolute',
        top: $(document).scrollTop() + $(this).height() / 2,
        left: '50%',
        'margin-left': -($(this).width()/2),
        'z-index': 50
    });

これは問題なく動作しますが、ウィジェットが相対的に配置された要素内にある場合に問題が発生します。

4

2 に答える 2

1

本文の上部にを作成し<div id="widgetContainer"></div>、ユーザーがリンクをクリックしたときにアクティブなウィジェットをそこに移動する必要があります。これにより、相対位置の問題が解決されます。jQuery の clone() メソッドを使用できます。

function showWidget(id)
{
    /* Perform other actions to setup your widget */
    $('#widgetContainer').html("");
    $('#' + id).clone().appendTo('#widgetContainer');
}

widgetContainer を相対にすることを忘れないでください (CSS)

#widgetContainer {
    position: relative;
}

@Simon-Arnolds の CSS 修正をこれと一緒に使用すると、問題が解決するはずです

left: $('body').width() / 2,
于 2012-08-30T14:42:16.917 に答える
1

50% ではなく本体の幅/2を参照してください

$(this).css({
  position: 'absolute',
  top: $(window).height() / 4,
  left: ($(this).parent().offset().left * -1) + ($('body').width() / 2),
  'margin-left': -($(this).width()/2),
  'z-index': 50
});
于 2012-08-30T14:48:17.593 に答える