jQuery onLoad Fancy Box

Hi, today i am going to show you how to display a popup box on page load and it will display every five seconds. it is very simple to develop and just a few lines of code, i am used setInterval() method to develop this small App. let's see how will do this.

HTML

design the popup box using divs, the shadow div works like a wrapper to the background, in next step take one div and give it name box and keep the image and close button div inside the box div,

<div class="shadow"></div>

<div class="box">
<div class="closebtn">Close</div>
<img src="goal.jpg" width="600" height="500">
</div>

CSS

in CSS, style the box div to give better look and set this div depth to top the shadow div using z-index property and set the alignments to box div to display it in middle of the browser, apply any background color or image and the background position:fixed to shadow div and give display:none to both div's.

<style>

.box{ width:600px; height:500px; color:#fff;box-shadow:0 0 10px #CCC; border:solid #FFF 10px;font-family:Tahoma, Geneva, sans-serif;font-size:12px;margin:0 auto;margin-top:100px; position:relative; z-index:1; display:none;}

.shadow{ background-image:url(light.png);width:100%; height:100%; position:fixed;z-index:1; top:0; display:none;}

.closebtn{padding:10px;background-color:#000;cursor:pointer; text-transform:capitalize; width:30px; position:absolute;}

</style>

JAVASCRIPT

write two function one is myAd() and myAdc() in each function just use fadeIn() and fadeOut()
methods to display and hidden the elements. write one click function to close button and put the myAdc() function inside this function, whenever user clicks close button trigger the myAdc() function and fadeOut the all elements

use setInterval() method to display the popup box in every five seconds, just place the myAdc() function inside the setInterval function as a first parameter and give time as a second parameter.

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 
 setInterval(function(){myAd()},5000); // every 5 secons


 function myAd(){
  
  $('.box').fadeIn('slow');
  $('.shadow').fadeIn('slow');
  $('.closebtn').fadeIn('slow');
  
 }
 
 
 function myAdc(){
 
  $('.box').fadeOut('slow');
  $('.shadow').fadeOut('slow');
  $('.closebtn').fadeOut('slow');
 
 }

 
 $('.closebtn').click(function(){

  myAdc();
  
 });
  
   
});

</script>

Live Demo   Download Script