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

这应该是相当直截了当的，但证明不成立。我希望（我的客户需要）弹出一个嵌入式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>

哪它弹出而言工作正常。然后在24秒后（视频的长度），命令应该隐藏两个叠加层。然而，他们在场内任何地方的存在使其不会弹出，更不用说在24秒后消失。

任何想法？

来源

2011-06-14 artparks

也许很好的'setTimeout'？ – 2011-06-14 13:35:47

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

其他的可能性，尽管稍微更多的工作是使用setTimeout或enqueue。

来源

2011-06-14 13:36:16

不知道，谢谢。问题排序。 – artparks 2011-06-14 13:38:32

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

回答

相关问题