Question

178

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

rated 0 times [ 182] [ 4] / answers: 1 / hits: 66778 / 10 Years ago, wed, may 14, 2014, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mckaylab

Add To Favorites

Follow

Total Points: 311

Total Questions: 120

Total Answers: 93

Location: Montenegro

Member since Thu, Jun 16, 2022

2 Years ago

mckaylab questions

1 How to use Material UI custom variants in React with Typescript

Fri, Apr 8, 22, 00:00, 2 Years ago

1 TypeError: Cannot read properties of undefined (reading 'forEach') at Object.< anonymous> (/home/runner/myrepl/index.js:10:6

Mon, Apr 4, 22, 00:00, 2 Years ago

1 How to use the AbortController to cancel Promises in React?

Wed, Dec 1, 21, 00:00, 3 Years ago

1 How To Open HTML Date Picker Dialog On Click Anywhere Inside Input?

Mon, Apr 26, 21, 00:00, 3 Years ago

1 How to change selenium-standalone port number via webdriverio wdio file?

Wed, Jul 24, 19, 00:00, 5 Years ago

View All

answered 10 Years ago frankiefredyr · Accepted Answer

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.