Popup is not centralize on first click

[jogal360]

When I open the popup in the first click is not centralize, after the popup is in the center. How can I resolve it?

[dinbror]

Do your popup have a width or height? Live example?

[osworx]

Have the same.
Using e.g. position: ['auto', 100] it is not centered, instead approx. 40px to much at the left side.
Resizing the brwoser window will center it then automatically.

[9mm]

I have the same problem... what the heck. I use bPopup on every site, for some reason it's completely wacky here.

[9mm]

I found the problem, it's because the modal didnt have display: none on it yet (I didn't add it get because I got sidetracked trying to figure out why it wasn't centered)

[edsnowden]

I was able to improve the centering of my popup (width: 100vw, height: auto) by:

• specifying amsl: 0 in the bPopup options
• calling reposition() in the callback, although visually this causes the popup to jump to its correct position

I did a quick bit of debugging of the bPopup code (spaces+tabs, /cry) and can see the problem is that in the first call to calcPosition(), $popup.outerHeight(true) returns the wrong height (too tall). I'm not sure why this is; I tried adding a setTimeout() in case it was a timing problem, but it doesn't seem to be. If I add $popup.reposition() immediately following the final doTransition(true) in open(), then the popup appears in the correct position, although I think there is still a brief visual jump.

Here's a monkey patch which adds the reposition(). It also sets the amsl to zero (which is something I would otherwise do for all my bPopups).

$.fn.bPopup = function immediate () {
    var old_bPopup = $.fn.bPopup;
    var new_bPopup = function () {
        var $popup = old_bPopup.apply(this, arguments);
        $popup.reposition();
        return $popup;
    };
    for (var key in old_bPopup) {
        new_bPopup[key] = old_bPopup[key];
    }
    new_bPopup.defaults.amsl = 0;
    return new_bPopup;
}();

[dinbror]

hey guys.

Do you have a live example? Jsfiddle or similar

[9mm]

I already said what the problem is

[dinbror]

yes but its the same issue @jogal360 has?

[9mm]

I would venture to guess it's the same, because I had 100% the same problems as he had, and I tried the same things to fix it, and got the same things.

[qingweibinary]

I have the same issue, using display:none solve my problem

[dinbror]

Okay guys, @9mm @qingweibinary

So your issue was that the popup wasn't centered on first open. And you fixed it by adding display none to the modal. Just as a css rule like this:

.b-modal {
display:none;
}

?

[9mm]

Yes that's all. The problem is that the modal needs to be hidden for it to work properly. If you accidentally leave it visible and dont realize it (such as if you have a very long homepage and its at the bottom, outside of the viewable window, shown but hard to notice), then that's when it messes it up. I scrolled to bottom on accident and that's when I realized it was visible to start. Added display none and the problem went away.

[dinbror]

Hmm ok. But the modal is being added when the popup opens. You know there is an option called ´modal´you can set to false. Is it because you're not appending to body? Do yo have a jsfiddle or live example? Or can you post the code for creating bpopup here?

Thanks

[MJ111]

I think found the problem.

function calcPosition(){
vPos 		= fixedVPos ? o.position[1] : Math.max(0, ((wH- $popup.outerHeight(true)) / 2) - o.amsl)
, hPos 		= fixedHPos ? o.position[0] : (wW - $popup.outerWidth(true)) / 2
, inside 	= insideWindow();
};

if $popup is hidden element, $popup.outerHeight(true), $popup.outerWidth(true) is zero.

[MJ111]

add these two lines in the open function. before the "doTransition(true);"

calcPosition();
$popup.css({'top': o.transition == 'slideDown' || o.transition == 'slideUp' ? (o.transition == 'slideUp' ? d.scrollTop() + wH : vPos + height * -1) : getTopPos(!(!o.follow[1] && fixedVPos || fixedPosStyle))});

[icexdev]

popup element inside non-display block, e.g.:
<div style="display:none"><div class="popup" style="display:none">popup content</div></div>