Question

Here is what I want to do: I have a pop up widget that appears when the user clicks on a link.

What I need is to position this widget in the middle of the screen no matter how up or down the user has scrolled, but not stop him from scrolling the page after the pop up becomes visible.

Since I can’t know where the widget will be appended (it gets created dynamically), I don’t think a CSS solution is good for me

The widget is written in jQuery

This is the code that currently does the positioning when the user clicks on the link:

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

This works just fine, but I’m having problems when the widget is inside a relatively positioned element.

Answer 1

You should create a <div id="widgetContainer"></div> at the top of the body and move your active widget into it when the user clicks the link. This will resolve the issue of relative positioning. You can use jQuery’s clone() method.

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

Remember to make widgetContainer relative (CSS)

#widgetContainer {
    position: relative;
}

And if you use @Simon-Arnolds CSS fix along with this, should solve your issues

left: $('body').width() / 2,