延迟关闭 JavaScript 窗口

Delayed closing of a javascript window

本文关键字：窗口 JavaScript 延迟      更新时间：2023-09-26

我正在开发一个JavaScript窗口，该窗口显示Google DFP的广告。 我是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>

这将使用覆盖提供的 onLoad 事件中的构建。加载覆盖层后，onload 事件将触发关闭对话框的setTimeout。

有关覆盖的文档

在叠加设置中将其添加到您的页面

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

以及以下功能。我将默认关闭时间设置为 10 秒

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

主题无效，因为您谈论的是窗口而不是"弹出窗口";我知道这只是文字;但它会帮助人们了解你的问题。

顺便说一下，这是我的建议：

// 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 事件中。

感谢大家为我指出正确的方向（以及覆盖文档。

答案很简单;我添加了以下代码。 

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

这似乎很完美。

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

不确定这是否是您想要的。我假设您单击 #interstitial_test 元素关闭窗口。

相关文章：