0
私は複数のタブを持つページを持っています。各タブの内容は外部ファイルから読み込まれます。各タブの内容には、ライトボックススタイルのポップアップとして表示される外部読み込みコンテンツへのリンクがあります。私の問題は、この要素の高さが確実に提供されていないため、ポップアップを垂直に中央に配置していることです。アラートが挿入されている場合（下のコードを参照）、高さは確実に計算されているようです。つまり、ある種の競合状態があるようですが、それが何であるか、それを修正する方法がわかりません。見た目の競争状態ローディングコンテンツ
記載されているコードの量についてお詫び申し上げます。私はまだ "実用的な"例を持っている間に私はそれを切った。以下に、メインのソースファイル、最初のタブのソース、およびポップアップのソースを示します。ここで
はメインソースファイルです：
<!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>
です読み終えてliveの代わりにdelegateを使用する。また、遅延やタイムアウトを挿入しようとしましたが、成功しませんでした。
ご協力いただければ幸いです。ありがとう。
'.live（）'に '.delegate（）'を使うのはちょっとしたパフォーマンスの向上に過ぎません、ちょうどFYI。 @マットグラント。 –
もちろん、当時、イベントの小さな変更が処理されるかどうかは、競争条件に違いが出るかどうかに本当に関心がありました。それはもちろんではありませんでしたが、私は少し必死に感じました。 – grymoire