0
我使用bpopup为我的页面上的各种链接创建独特的弹出窗口。每个包含一个带谷歌地图链接和2个文本div的iframe。我没有问题打开弹出窗口，但第一次我的格式非常破碎，弹出窗口无法居中。第二次点击链接时，格式是正确的，但弹出窗口仍然不居中。第三次，我点击一个链接，一切正常。Bpopup布局问题
这里是我的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);
}
以下是有关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; }
任何帮助将不胜感激！