Popup Appears in the wrong position the first time

[DavidBenko]

Just using the default .bPopup(); method, the popup appears incorrectly like this the first time:

But appears correctly every subsequent time:

No errors are generated in the console.

[dinbror]

It looks like the width of the popup is fixed? Try giving it a fixed width in your css sheet

[pavsid]

Problem is that the position of the popup is calculated before it is appended to the container (which is body by default). So, if you have position:relative on any parent of the popup, then its position will be calculated in relation to this, instead of the window.

Here's my solution:

Grab the un-minimised version of the js, and swap out lines 112-125 with the following. This way, the position gets calculated _after the popup is added to the body.

// POPUP
            $popup
                .data('bPopup', o).data('id',id)
                .each(function() {
                    if(o.appending) {
                        $(this).appendTo(o.appendTo);
                    }
                    calPosition();
                    $(this).css({ 
                          'left': o.transition == 'slideIn' || o.transition == 'slideBack' ? (o.transition == 'slideBack' ? d.scrollLeft() + wW : (hPos + width) *-1) : getLeftPos(!(!o.follow[0] && fixedHPos || fixedPosStyle))
                        , 'position': o.positionStyle || 'absolute'
                        , 'top': o.transition == 'slideDown' || o.transition == 'slideUp' ? (o.transition == 'slideUp' ? d.scrollTop() + wH : vPos + height * -1) : getTopPos(!(!o.follow[1] && fixedVPos || fixedPosStyle))
                        , 'z-index': o.zIndex + popups + 1 
                    });
                });

Perhaps @dinbror can take a look and see if the plugin can be updated with this?

[roriGit]

Thank You pavsid. Had the same problem but its all good now !

[nbpalomino]

I use a primitive approach... use:

setTimeout(function(){
  $('.popup').bPopup();
}, 150);