Jquery 表观竞争条件加载内容
我有一个包含多个选项卡的页面。每个选项卡的内容都是从外部文件加载的。每个选项卡的内容都有指向外部加载内容的链接，这些内容将显示为lightbox样式的弹出窗口。我的问题是弹出窗口垂直居中，因为没有可靠地提供该元素的高度。如果插入警报（参见下面的代码），则高度似乎可以可靠地计算。也就是说，似乎存在某种比赛条件，但我不知道它是什么，也不知道如何解决它 我为列出的代码量道歉。我尽可能地缩减了它，同时仍然有一个“有效”的例子。下面是主源文件、第一个选项卡的源和弹出窗口的源 以下是主要的源文件：Jquery 表观竞争条件加载内容,jquery,Jquery,我有一个包含多个选项卡的页面。每个选项卡的内容都是从外部文件加载的。每个选项卡的内容都有指向外部加载内容的链接，这些内容将显示为lightbox样式的弹出窗口。我的问题是弹出窗口垂直居中，因为没有可靠地提供该元素的高度。如果插入警报（参见下面的代码），则高度似乎可以可靠地计算。也就是说，似乎存在某种比赛条件，但我不知道它是什么，也不知道如何解决它 我为列出的代码量道歉。我尽可能地缩减了它，同时仍然有一个“有效”的例子。下面是主源文件、第一个选项卡的源和弹出窗口的源 以下是主要的源文件： <
<!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>
JQuery问题
$（文档）.ready（函数（）{
//手风琴
$（“#accordion”）.accordion（{标题：“h3”}）；
$（“#accordion”）.accordion（{fillSpace:true}）；
//标签
$（“#tabs”）.tabs（）；
$（'#tabs'）.tabs（{所选：0}）；
//静态小部件上的悬停状态
$（“#对话框#链接，ul#图标li”）。悬停(
函数（）{$（this.addClass（'ui-state-hover'）；}，
函数（）{$（this）.removeClass（'ui-state-hover'）；}
);
$（document）.delegate（'a.poplight'，'click'，function（）{
var popID=$（this.attr（'rel'）；//获取弹出窗口名称
var popURL=$（this.attr（'href'）；//获取Popup href以定义大小
//从href URL提取查询变量（&V）
var query=popURL.split（“？”）；
var remoteURL=query[0]；
var dim=query[1]。拆分（'&'）；
var popWidth=dim[0]。拆分（'='）[1]；//获取第一个查询字符串值
如果（remoteURL！==“#”）{
var r=remoteURL.substring（0，remoteURL.length-1）；
$（'#'+popID）.load（r，函数（响应，状态，xhr）{
如果（状态=“错误”）{
$（“#error”）.html（“error:+xhr.status+”“+xhr.statusText）；
}
});
}
//注释此警报，加载的弹出窗口高度（$（“#”+popID）.height（）将为0。
//取消注释此警报，高度将突然正确。
//还控制加载内容上“关闭”按钮的外观。
//警报（“加载的弹出内容现在应该可以工作了。”）；
//淡入弹出窗口并添加关闭按钮
$（“#”+popID）.fadeIn（）；
$（'#'+popID）.css（{'width'：Number（popWidth）}）
$（'#'+popID）.prepend（''）；
//定义中心对齐的边距（垂直、水平）。
//高度/宽度增加80像素，以适应
//css中定义的填充和边框宽度。
var popMargTop=（$（'#'+popID）.height（）+80）/2；
var popMargLeft=（$（'#'+popID）.width（）+80）/2；
//在我的测试中，有时是对的，大部分是错的。感觉像是比赛状态。
var poplen=$（'#'+popID）.length；
警报（“popID=“+popID+”，length=“+poplen+”，popMargTop=“+popMargTop”）；
//将边距应用于弹出窗口
$（'#'+popID）.css({
“页边距顶部”：-popMargTop，
“左边距”：-popMargLeft
});
//淡入背景
$（'body'）。追加（''）；
$（#fade'）.css（{'filter'：'alpha（不透明=80）}）.fadeIn（）；//淡入淡入淡入层-css过滤器用于修复淡入透明胶片上的IE错误
返回false；
});
//关闭弹出窗口和淡入层
$（文档）.delegate（'a.close，#fade'，'click'，function（）{
$（'#淡入，.popup#u块'）。淡出（函数（）{
$（“#淡入，a.close”）.remove（）；//将它们淡出
});
返回false；
});
});
正文{字体：62.5%“投石机MS”，无衬线；边距：20px 50px；}
分区弹出式菜单块h2{
颜色：#0000ff；
字体大小：粗体；
}
#褪色{
显示：无；/*--默认情况下隐藏--*/
背景：#000；
位置：固定；左侧：0；顶部：0；
宽度：100%；高度：100%；
不透明度：.80；
z指数：9999；
}
.弹出式按钮{
显示：无；/*--默认情况下隐藏--*/
背景：#fff；
填充：20px；
边框：20px实心#ddd；
浮动：左；
字体大小：1.2米；
位置：固定；
顶部：50%；左侧：50%；
z指数：99999；
/*--CSS3框阴影--*/
-网络工具包盒阴影：0px 0px 20px#000；
-moz盒阴影：0px 0px 20px#000；
盒影：0px 0px 20px#000；
/*--CSS3圆角--*/
-webkit边界半径：10px；
-moz边界半径：10px；
边界半径：10px；
}
img.btn\u关闭{
浮动：对；
利润率：-55px-55px 0；
}
/*--让IE6理解固定定位--*/
*html#淡出{
位置：绝对位置；
}
*html.popup\u块{
位置：绝对位置；
}
JQuery竞争条件（？）问题
加载。。。
加载。。。
<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>
选项卡0的内容
弹出div位于tab0.html中
Lorem ispum等
Lorem ispum等
Lorem ispum等
Lorem ispum等
<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>
在tab0_pop0.html中弹出
Lorem ipsum盐