модальное всплывающее окно для скрытия () после задержки - PullRequest
1 голос
/ 14 июня 2011

Это должно быть довольно просто, но это не так.Я хочу (чтобы мой клиент хотел) всплывающее окно лайтбокса со встроенным видео на 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 секунды.

Есть идеи?

1 Ответ

2 голосов
/ 14 июня 2011

.hide() без продолжительности не добавляется в очередь, выполняется сразу. Самым простым трюком было бы изменить его на .hide(1).

Другие возможности, хотя немного больше, было бы использовать setTimeout или enqueue.

...