Popup is not centralize on first click about bpopup HOT 16 OPEN

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;
}();

from bpopup.

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;
}

?

from bpopup.

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

from bpopup.

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

from bpopup.

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.

from bpopup.

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

from bpopup.

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)

from bpopup.

hey guys.

Do you have a live example? Jsfiddle or similar

from bpopup.

I already said what the problem is

from bpopup.

yes but its the same issue @jogal360 has?

from bpopup.

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.

from bpopup.

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

from bpopup.

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.

from bpopup.

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

from bpopup.

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.

from bpopup.

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))});

from bpopup.