在页面加载（onload）时，我需要一个弹出框出现，然后在 5 秒后消失答案

【问题标题】：on page load (onload) I need a popup box to appear and than fade after 5 seconds在页面加载（onload）时，我需要一个弹出框出现，然后在 5 秒后消失
【发布时间】：2014-05-14 23:50:14
【问题描述】：

我认为这样的事情可能会奏效，但它并不能完全满足我的需求。

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

<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 秒后淡出。

任何帮助将不胜感激。谢谢。

【问题讨论】：

哇...从哪里开始...
首先，到底发生了什么？你的弹窗正常吗？
我知道我在其中混合了 jquery 和 javascript...现在完全一团糟，这就是我在这里寻找的原因...我知道我可能可以消除其中一个 @ fizzix
当您可以使用简单的东西（例如 Bootstrap）时，为什么要重新发明轮子？如果您想走这条路，我可以为您创建一个简单的示例？
目前没有了。

标签： javascript jquery html css

【解决方案1】：

创建一个非常简单的 Bootstrap 模式，然后设置一个您希望它隐藏的超时时间。 Bootstrap 模态看起来很棒，并且非常可定制。他们也有很棒的淡入淡出动画。查看所有文档以及事件、方法和选项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。

【讨论】：

谢谢你.. 这是一种看起来很性感的模态。欣赏它。 ; ]
这看起来对吗？ $( 文档 ).ready(function() { $('#overlay').modal('show'); setTimeout(function() { $('#overlay').modal('hide'); }, 5000 ); });

【解决方案2】：

将此代码添加到和：

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

您的代码中似乎缺少了

【讨论】：

【解决方案3】：

您的窗口从 DIV 中弹出。将 CSS 应用于包含打开窗口的脚本标记的 DIV 不会影响弹出窗口，因为它不再包含在 DIV 中 - 它已“弹出”并离开该 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);
      });

【讨论】：