Question

我认为这样的事情可能有用，但它并没有完全满足我的需要。

这就是我现在正在尝试的事情。

<style type="text/css">
    #overlay
    {
        display:none;
    }
</style>
<script>
    $( document ).ready(function(){
        $('#overlay').fadeIn('fast').delay(15000).fadeOut('fast');
    });
</script>
<div id="overlay">
<script>
      $(function () {
          $('a').click(function(){
              window.open('/getting-started/feg-top-performers','mywindow','width=400,height=200,toolbar=yes, 
    location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,copyhistory=yes, 
    resizable=yes')
          });
      });
</script>
</div>

基本上，一旦页面打开，我想填充一个完整的html页面，然后让该页面（弹出窗口）在5秒后淡出。

非常感谢任何帮助。谢谢。

Answer 1

创建一个非常简单的Bootstrap模式，然后为您希望隐藏的时间设置超时。 Bootstrap Modals看起来很棒，非常可定制。它们还具有很好的淡入淡出动画效果。查看所有文档以及事件，方法和选项HERE。

<强> jQuery的：

$('#overlay').modal('show');

setTimeout(function() {
    $('#overlay').modal('hide');
}, 5000);

<强> HTML：

<div class="modal fade" id="overlay">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>Context here</p>
      </div>
    </div>
  </div>
</div>

WORKING DEMO

PS。如果您想沿着这条路走，请不要忘记在项目中同时包含bootstrap.js和bootstrap.css。您可以使用远程CDN文件HERE，或下载它们并将其包含在项目HERE中。

Answer 2

将此代码添加到以下内容：

setTimeout(function () { win.close();}, 5000);

您的代码中似乎缺少

Answer 3

你的窗口弹出DIV。将CSS应用于包含打开窗口的脚本标记的DIV将不会影响弹出窗口，因为它不再包含在DIV中 - 它已弹出＆＃34;弹出＆＃34;离开那个DIV的地方。

您需要做的是使用Javascript将CSS应用于窗口本身（只有当两个页面都在同一个站点上时才能这样做，在这种情况下它们就是这样）。假设调用了JQuery（未经测试的代码，仅仅是您使用的起点），这样的事情。

      $(function () {
          $('a').click(function(){
              NewWin=window.open('/getting-started/feg-top-performers','mywindow','width=400,height=200,toolbar=yes, 
    location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,copyhistory=yes, 
    resizable=yes')
          });
var overlayopacity = 1;
var overlayinterval = window.setInterval("if(overlayopacity>0){overlayopacity-=0.1;}else{overlayinterval=window.clearInterval(overlayinterval);}NewWin.document.getElementsByTagName("body")[0].style.opacity=overlayopacity;", 500);
      });

在页面加载（onload）我需要一个弹出框出现，然后在5秒后淡出

3 个答案: