页面加载(onload)时，我需要一个弹出框来显示，而不是在5秒钟后消失 [英] on page load (onload) I need a popup box to appear and than fade after 5 seconds

问题描述

我认为类似的方法可能有用，但是并不能完全满足我的需求.

I thought something like this might work but it's not giving me exactly what i need.

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

Here's what I'm trying right now.

<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秒钟后消失.

Basically as soon as the page opens I want to populate an entire html page and than have that page (the popup) fade out after 5 seconds.

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

Any help would be greatly appreciated. Thank you.

推荐答案

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

Create a very simple Bootstrap modal, then set a timeout for when you would like it to hide. Bootstrap Modals look fantastic and are very customizable. They also have great fade in and out animations. View all the documentation along with the events, methods and options 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>

工作演示

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

PS. Don't forget to also include both bootstrap.js and bootstrap.css within your project if you would like to go down this path. You can use the remote CDN files HERE, or download them and include them within your project HERE.

这篇关于页面加载(onload)时，我需要一个弹出框来显示，而不是在5秒钟后消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！