模態彈出框在一段時間後隱藏（）

這應該是相當直截了當的，但證明不成立。我希望（我的客戶需要）彈出一個嵌入式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

模態彈出框在一段時間後隱藏（）

回答

相關問題