延遲關閉JavaScript窗口

我正在爲顯示Google DFP廣告的JavaScript窗口工作。我是一名JavaScript初學者，我在這裏的代碼是從另一個廣告服務改編而來的。延遲關閉JavaScript窗口

該窗口在頁面加載時打開狀態良好，當關閉按鈕被點擊時它會關閉，但我希望它在一段時間（比如說五秒）過後自動關閉。

下面是我使用的代碼：

<html> 
<head> 
    <style> 
    .simple_overlay { 
     display: none; 
     z-index: 10000; 
     background-color: #fff; 
     width: 640px; 
     height: 480px; 
     border: 20px solid black; 
     -moz-box-shadow: 0 0 90px 5px #000; 
     -webkit-box-shadow: 0 0 90px #000; 
    } 

    .simple_overlay .close { 
     background-image: url https://s3.amazonaws.com/onlineads/interstitial_test/CloseWindow_shoot.png); 
     position: absolute; 
     right: -35px; 
     top: -35px; 
     cursor: pointer; 
     height: 30px; 
     width: 30px; 
    } 
    .title { 
     font-weight: 20px; 
    } 
    </style> 
    <script type="text/javascript" src="https://s3.amazonaws.com/onlineads/shoot_js/jquery.min.js"></script> 
    <script type="text/javascript" src="https://s3.amazonaws.com/onlineads/shoot_js/jquery.tools.min.js"></script> 
    <script> 
     setTimeout(function() { $("#interstitial_test").overlay({top: 200,mask: { color: "black", loadSpeed: 200, opacity: 0.5}, closeOnClick: false,load: false}); 
     setTimeout(function() {$("#interstitial_test").overlay().load();},2000);},200); 
    </script> 
    <title>Intestitial Test</title> 
    </head> 

    <body> 
    <div class="simple_overlay" id="interstitial_test"> 
      <img src="https://s3.amazonaws.com/onlineads/shoot/Interstitial_Artwork.jpg"></img> 
    </div> 
    </body> 

</html>

來源

2015-01-07 Mike Morgera

您是否確實需要展示廣告窗口？我討厭那些，那裏非常侵入。這只是一個意見。請看看你的代碼。 – Mouser

如果你提供了一個jsFiddle，它會更容易。 –

var timer = 5000; // in millisecond 

setTimeout(function() { 
    // trigger a click on the #interstitial_test after 5 seconds. 
    $('#interstitial_test').trigger('click'); 
}, timer);

不知道這是否是你想要的或沒有什麼。我假設你點擊#interstitial_test元素關閉窗口。

來源

2015-01-07 20:07:14 Xzigraz

我嘗試了var定時器並設置超時功能，但它似乎沒有任何效果。它是否與其他函數或HTML之下一致？ –

這並沒有真正考慮到jQuery工具的背景下，加上OP似乎知道如何使用setTimeout – sodawillow

感謝您指出我在正確的方向！ –

這將使用疊加提供的onLoad事件中的構建。覆蓋圖加載後，onload事件觸發關閉對話框的setTimeout。

documentation on overlay

給你的頁面添加了疊加設置

$("#interstitial_test").overlay(... onLoad : closeModalOverlay ...)

而下面的函數內。我將默認關閉時間設置爲10秒

function closeModalOverlay() { 
    setTimeout(function() {$("#interstitial_test").overlay().close();},10000); 
}

來源

2015-01-07 20:24:39 Mouser

當您談論窗口而不是「彈出」時，該主題無效;我知道這只是文字;但它會幫助人們理解你的問題。

順便說一句，這裏是我的建議：

// Wait until DOM is ready 
 
$(function(){ 
 

 
    // This is your Element : 
 
    $overlay = $("#interstitial_test"); 
 
    
 
    // Assign the overlayJQueryStuffs 
 
    $overlay.overlay(
 
    { 
 
     top: 200, 
 
     mask: { 
 
     color: "black", 
 
     loadSpeed: 200, 
 
     opacity: 0.5 
 
     }, 
 
     closeOnClick: false, 
 
     load: false 
 
    } 
 
); 
 

 
    // Open it 
 
    $overlay.overlay().load(); 
 

 
    // Close it later : 
 
    setTimeout(
 
    function() { 
 
     $overlay.overlay().close(); 
 
    }, 
 
    2000 
 
); 
 
    
 
    
 
});

.simple_overlay { 
 
    display: none; 
 
    z-index: 10000; 
 
    background-color: #fff; 
 
    /* 
 
    width: 640px; 
 
    height: 250px; 
 
    */ 
 
    width: 64px; 
 
    height: 25px; 
 
    border: 20px solid black; 
 
    -moz-box-shadow: 0 0 90px 5px #000; 
 
    -webkit-box-shadow: 0 0 90px #000; 
 
} 
 

 
.simple_overlay .close { 
 
    background-image: url(https://s3.amazonaws.com/onlineads/interstitial_test/CloseWindow_shoot.png); 
 
    position: absolute; 
 
    right: -35px; 
 
    top: -35px; 
 
    cursor: pointer; 
 
    height: 30px; 
 
    width: 30px; 
 
} 
 

 
.title { 
 
    font-weight: 20px; 
 
}

<div class="simple_overlay" id="interstitial_test"> 
 
    <img src="https://s3.amazonaws.com/onlineads/shoot/Interstitial_Artwork.jpg"></img> 
 
    </div> 
 

 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

希望它能幫助。我用這個文檔瞭解疊加：http://jquerytools.github.io/documentation/overlay/

我覺得@Mouser是正確的。我可能不瞭解這個問題。如果您想在操作後關閉彈出窗口x時間。您必須將關閉功能放入onload事件中。

來源

2015-01-07 20:31:32

謝謝大家指着我在正確的方向（以及覆蓋的文件。）

答案竟然是非常簡單的;我添加了下面的代碼。

setTimeout('$("#interstitial_test").data("overlay").close();', 10000);

這似乎很好地工作。

來源

2015-01-07 20:58:09

這是有效的，因爲超時已足夠。但是更通用的做法是在打開對話框的下方添加此代碼是有缺陷的。考慮以下情況：您有一個模式對話框，可以異步加載數據，響應服務器正忙，加載時間超過10秒。在加載內容之前，對話框將由您的代碼關閉。使用onload事件可確保在關閉窗口之前加載內容數據。不過，我強烈建議不要在這種方式上展示廣告。 – Mouser

延遲關閉JavaScript窗口

回答

相關問題