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

参考车身宽度/2 而不是 50%

$(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 回答