Bpopup placement issue

Question

I'm using bpopup to create unique popups for various links on my page. Each contains an iframe with a google map link and 2 text divs. I have no problem opening the popup windows, but the first time my formatting is terribly broken and the popup is nowhere near centered. The second time I click on a link the formatting is correct but the popup still isn't centered. The third time I click on a link everything works correctly.

Here's my javascript:

//Adds lightboxes
function addLightbox(){
$('.small').on('click',function(){
    var page = $(this).attr('title');
    $('#'+page).bPopup({
    positionStyle: 'fixed'
    });
            //This was added later, as on full-screen window resizes
            //the popup works as intended
    $(function () {
        $(window).resize();
    });
});
}

// Puts div content in lightboxes
function makeLightboxContent(id){
var name = pharm_data[id].pharmacy_name;
var distance = parseFloat(pharm_data[id].distance).toFixed(1);
var address1 = pharm_data[id].address.match(/([^,]*),(.*)/)[1];
var address2 = pharm_data[id].address.match(/([^,]*),(.*)/)[2];
var address_google = pharm_data[id].address.replace(/\s+/g,"+");
var words = "Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram; multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.";
//var hours = "";
//var phone = "";
var link = 'https://maps.google.com/maps?q='+address_google+'&ie=UTF8&hq=&hnear='+address_google+'&t=m&z=14&output=embed';

var toReplace = '<div id ="popup'+id+'" class="popup_modal">'+  
                    '<div class="lightbox_content">'+
                        '<div class="direction_map" ><iframe src="'+ link + '"></iframe></div>'+
                        '<div class="popup_address_col2">'+
                            '<h4><b>'+name+'</b></h4>'+
                            '<p>' + words + '</p>' +
                        '</div>'+
                        '<div class="popup_address_col">'+
                            '<div class="add_decri_col">' +
                                '<h4>Address + Phone</h4>' +
                                '<p>'+
                                distance + ' Miles<br>' +
                                address1 + '<br>' +
                                address2 + '<br>' +
                                'Phone: '+ 'XXX-XXXX-XXX' + 
                                '</p>'+
                            '</div>'+
                            '<div class="add_decri_col">'+
                                '<h4>Hours</h4>'+
                                '<p>'+
                                    'M-F <br/>09:00 AM - 09:00 PM<br>'+
                                    'Sat <br/>09:00 AM - 07:00 PM<br>'+
                                    'Sun <br/>10:00 AM - 06:00 PM'+
                                '</p>'+
                            '</div>'+
                        '</div>'+       
                    '</div>'+
                '</div>';
$('#hidden_lightbox').append(toReplace);

}

Here's the relevant CSS

.popup_modal{
display:none; max-width: 1078px; float: left; background: #fff; border: 1px solid #d4d4d4;
border-radius: 3px; box-shadow: 0px 0px 5px #ccc; position: relative; margin-top: 20px; padding:20px;
}
.lightbox_content{ width:100%; float:left; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; font-family: 'FuturaBkBTBook'; background: #fff; }
.direction_map{  border: 1px solid #D6D6D6; float: left; width:48%; margin-right: 1%;}
.lightbox_content iframe { min-height: 370px; width:100%; border:0; vertical-align:top;            }
.lightbox_content p{ font-size:15px; color:#000; line-height:26px; }
.popup_address_col{ border-top: 1px solid #b2b2b2; width: 48%; float: left; margin-top: 50px;}
.popup_address_col .add_decri_col{ float: left; width: 49%; border-right: 1px solid #ccc; padding-left: 15px; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-sizing: border-box;}
.popup_address_col .add_decri_col:last-child{ border:0;}
.popup_address_col .add_decri_col h4{ text-transform: uppercase; font-size: 15px; font-weight: bold; margin-bottom: 9px; }
.popup_address_col .add_decri_col p{ line-height:20px; font-size: 12px; }

.popup_address_col2{ width: 48%; float: left; margin-top: 10px;}
.popup_address_col2{ float: left; width: 49%; padding-left: 15px;}
.popup_address_col2 h4{ text-transform: uppercase; font-size: 20px; font-weight: bold; margin-bottom: 9px; }
.popup_address_col2 p{ line-height:15px; font-size: 12px; }

Any help would be greatly appreciated!

Answer 1

I was a fool and put the bpopup's position as relative when it should have been absolute. Grr.