Question

This should be fairly straight forward but is proving not to be. I want (my client wants) a pop up lightbox window with an embedded youtube video to appear as soon as the page is loaded and then for it to disappear when the video has finished. I was struggling to make one of the normal lightboxes pop up on page load so managed to get the following working:

$(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> 

Which works fine in terms of it popping up. Then the

   $("#mask").delay(24000).hide();
   $(".window").delay(24000).hide();

commands should be hiding the two overlays after 24 seconds (the length of the video). However their presence anywhere in the piece causes it not to pop up at all, let alone disappear after 24 seconds.

Any ideas?

Answer 1

.hide() with no duration does not get added to the queue, it executes immediately. The easiest trick would be to change it to .hide(1).

Other possibilities although slightly more work would be to use setTimeout or enqueue.