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。

模态弹出框在一段时间后隐藏（）

1 个答案: