模式弹出框在一段时间延迟后隐藏()

Question

这应该是相当直接的，但事实并非如此。我希望（我的客户希望）一个带有嵌入式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秒后消失了。

有什么想法吗？

Answer 1

没有持续时间的.hide()不会添加到队列中，它会立即执行。最简单的技巧是将其更改为.hide(1)。

其他可能的方法是使用setTimeout或enqueue，尽管工作量稍大。