我有一个包含多个标签的页面。每个选项卡的内容都是从外部文件加载的。每个选项卡的内容都包含指向外部加载内容的链接，这些内容将显示为灯箱样式弹出窗口。我的麻烦是弹出窗口垂直居中，因为没有可靠地提供此元素的高度。如果插入警报（参见下面的代码），则可以可靠地计算高度。也就是说，似乎存在某种竞争条件，但我不知道它是什么或如何解决它。
我为列出的代码量道歉。我尽可能地削减它，同时仍然有一个“工作”的例子。下面是主要源文件，第一个选项卡的源代码和弹出窗口的源代码。
这是主要的源文件：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery Issue</title>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/start/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Accordion
$("#accordion").accordion({ header: "h3" });
$("#accordion").accordion({ fillSpace: true });
// Tabs
$('#tabs').tabs();
$('#tabs').tabs({ selected: 0 });
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
$(document).delegate('a.poplight','click', function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query = popURL.split('?');
var remoteURL = query[0];
var dim = query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
if ( remoteURL !== "#" ) {
var r = remoteURL.substring(0, remoteURL.length - 1);
$('#' + popID).load( r, function( response, status, xhr ) {
if (status == "error") {
$("#error").html("Error: " + xhr.status + " " + xhr.statusText);
}
});
}
// Comment this alert and the loaded popup height ( $('#' + popID).height() ) will be 0.
// Uncomment this alert and the height will suddenly be correct.
// Also controls the appearance of the close button on loaded content.
// alert("Loaded popup content should work now.");
//Fade in the Popup and add close button
$("#" + popID).fadeIn();
$('#' + popID).css({ 'width': Number( popWidth ) })
$('#' + popID).prepend('<a href="#" class="close"><img src="img/close_pop.png" border="0" class="btn_close" title="Close Window" alt="Close" /></a>');
// Define margin for center alignment (vertical, horizontal).
// Add 80px to the height/width to accomodate for the
// padding and border width defined in the css.
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
// Sometimes right, mostly wrong in my tests. Feels like a race condition.
var poplen = $('#' + popID).length;
alert("popID = " + popID + ", length = " + poplen + ", popMargTop = " + popMargTop);
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); // Fade in the fade layer - css filter used to fix the IE Bug on fading transparencies
return false;
});
//Close Popups and Fade Layer
$(document).delegate('a.close, #fade','click', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
<style type="text/css">
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 20px 50px;}
div.popup_block h2 {
color: #0000ff;
font-weight: bold;
}
#fade {
display: none; /*--hidden by default--*/
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block {
display: none; /*--hidden by default--*/
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
</style>
</head>
<body>
<h1>JQuery race condition (?) issue</h1>
<!-- Tabs -->
<div id="tabs">
<ul>
<li><a href="tab0.html" title="tabs0">Tab 0</a></li>
<li><a href="tab1.html" title="tabs1">Tab 1</a></li>
</ul>
<div id="tabs0"> Loading... </div>
<div id="tabs1"> Loading... </div>
</div>
</body>
</html>
这是tab0.html：
<div id="tab0-contents">
<h3>Contents of Tab 0</h3>
<a href="tab0_pop0.html#?w=700" rel="pop_t0p0" class="poplight">Popup external file tab0_pop0.html</a>
<br/>
<a href="#?w=700" rel="pop_t0p1" class="poplight">Popup inside tab0.html</a>
<br/>
<div id="pop_t0p0" class="popup_block"></div>
<div id="pop_t0p1" class="popup_block">
<h2>Popup div lives inside tab0.html</h2>
<p>Lorem ispum etcetera.</p>
<p>Lorem ispum etcetera.</p>
<p>Lorem ispum etcetera.</p>
<p>Lorem ispum etcetera.</p>
</div>
</div>
最后，这是tab0_pop0.html
<div id="tab0_pop0_contents">
<h2>Popup in tab0_pop0.html<h2>
<p>Lorem ipsum salts.</p>
<p>Lorem ipsum salts.</p>
<p>Lorem ipsum salts.</p>
<p>Lorem ipsum salts.</p>
<p>Lorem ipsum salts.</p>
<p>Lorem ipsum salts.</p>
<p>Lorem ipsum salts.</p>
<p>Lorem ipsum salts.</p>
<p>Lorem ipsum dolor amit.</p>
<p>Lorem ipsum salts con carne.</p>
</div>
如果有人想知道，我在阅读this article后转而使用delegate代替live。我也试过插入延迟和超时但没有成功。
非常感谢任何帮助。感谢。
答案 0 :(得分：0)
你可以修改它以便设置弹出窗口并显示其onload条件吗？我已经看到了一个$（'＃'+ popID）.load，所以放置其余的显示代码会使高度工作，因为它已经被加载了。我在我写的最后一个jquery库中遇到了类似的竞争条件，并被迫进行相同的更改。