Это должно быть довольно просто, но это не так.Я хочу (чтобы мой клиент хотел) всплывающее окно лайтбокса со встроенным видео на YouTube, чтобы оно появлялось сразу после загрузки страницы, а затем исчезало по окончании видео.Я изо всех сил пытался заставить один из обычных лайтбоксов всплывать при загрузке страницы, поэтому мне удалось заставить работать следующее:
$(document).ready(function() {
//Put in the DIV id you want to display
launchWindow('#dialog1');
//if close button is clicked
$('.window #close').click(function () {
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
$("#mask").delay(24000).hide();
$(".window").delay(24000).hide();
});
function launchWindow(id) {
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height());
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
}
<div id="boxes">
<div id="dialog1" class="window">
<iframe width="725" height="442" src="http://www.youtube.com/embed/SMlRXI_N6u4?autoplay=1" frameborder="0" allowfullscreen id="youtube-popup"></iframe>
</div>
</div>
<div id="mask"></div>
, который прекрасно работает с точки зрения его появления.Тогда команды
$("#mask").delay(24000).hide();
$(".window").delay(24000).hide();
должны скрывать два оверлея через 24 секунды (продолжительность видео).Однако их присутствие где-либо в части заставляет это вообще не всплывать, не говоря уже о том, чтобы исчезнуть через 24 секунды.
Есть идеи?