Question

以下是我想要做的事情：当用户点击链接时，我会看到一个弹出窗口小部件。

我需要的是将这个小部件放在屏幕中间，无论用户向上或向下滚动多少，但是在弹出窗口变为可见之后，不要阻止他滚动页面。

由于我无法知道小部件的附加位置（它是动态创建的），我认为CSS解决方案不适合我

小部件是用jQuery编写的

当用户点击链接时，这是当前进行定位的代码：

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

这很好用，但当小部件位于相对定位的元素内时，我遇到了问题。

Answer 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,

Answer 2

请参阅正文宽度/ 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
});

如何在使用position：absolute时将元素放在窗口中间？

2 个答案: