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

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，尽管工作量会稍微多一些。