#jquery
#jquery
Вопрос:
У меня есть страница с несколькими вкладками. Содержимое каждой вкладки загружается из внешнего файла. Содержимое каждой вкладки содержит ссылки на загруженный извне контент, который будет отображаться в виде всплывающего окна в стиле лайтбокса. Моя проблема заключается в том, что всплывающее окно центрируется по вертикали, поскольку высота этого элемента не обеспечивается надежно. Если вставлено предупреждение (см. Код ниже), то высота, по-видимому, надежно вычислена. То есть, похоже, существует какое-то состояние гонки, но я не знаю, что это такое или как это исправить.
Я приношу извинения за количество приведенного кода. Я сократил его, как мог, пока все еще имел «рабочий» пример. Ниже приведен основной исходный файл, исходный код для первой вкладки и исходный код для всплывающего окна.
Вот основной исходный файл:
<!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 amp; Variables from href URL
var query = popURL.split('?');
var remoteURL = query[0];
var dim = query[1].split('amp;');
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>
На случай, если кому-то интересно, я перешел на использование delegate вместо live после прочтения этой статьи в jquery. Я также пытался вставить задержки и тайм-ауты, но безуспешно.
Любая помощь была бы высоко оценена. Спасибо.
Комментарии:
1. Использование
.delegate()over.live()приведет лишь к крошечному улучшению производительности, просто к вашему сведению.2. @Мэтт согласен. Конечно, в то время меня действительно больше интересовало, повлияет ли небольшое изменение в обработанных событиях на состояние гонки. Конечно, этого не произошло, но я чувствовал себя немного отчаявшимся.
Ответ №1:
Можете ли вы изменить это так, чтобы всплывающее окно было настроено и отображалось в состоянии загрузки? Я уже вижу $ (‘#’ popID).load , поэтому добавление остальной части отображаемого кода заставило бы height работать, поскольку он уже был загружен. Я столкнулся с аналогичным состоянием гонки в последней библиотеке jquery, которую я написал, и был вынужден внести те же изменения.
Комментарии:
1. Очень приятно. Мне пришлось хлопнуть себя по лбу после прочтения этого. Спасибо!