on page load (onload) I need a popup box to appear and than fade after 5 seconds

css, html, javascript, jquery

Solution

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>

WORKING DEMO

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.

Problem

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

Original source