Question

我正在开发一个显示Google DFP广告的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>

Answer 1

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

documentation on overlay

在叠加设置

中将其添加到您的页面

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

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

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

Answer 2

主题无效，因为你谈论窗口而不是弹出＆＃34 ;;我知道这只是单词;但它会帮助人们理解你的问题。

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

＆＃13;

// 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
  );
  
  
});

＆＃13;

.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;
}

＆＃13;

  <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>

＆＃13;

希望有所帮助。我使用此文档了解overlay：http://jquerytools.github.io/documentation/overlay/

我认为@Mouser是对的。我可能没有理解这个问题。如果你想在oppening后关闭弹出窗口x时间。你必须将close函数放在onload事件中。

Answer 3

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

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

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

这似乎完美无缺。

Answer 4

var timer = 5000; // in millisecond

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

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

延迟关闭javascript窗口

4 个答案: