Learn How to Onload Fancy Box Using jQuery

As we know that, Onload Fancy BOX USING Jquery is the most irritating thing in the web designing as well as web development. However, many of them need this concept for their personal usage or eCommerce website.

Let me share the coding for the Onload Fancy box using jQuery. Below, is the script, the box will be open after five minutes of the page load.

CODE 
<div class="fbox">
  <div class="close">X</div>
  <img src="sample.jpg" width="250" height="250">
</div>

SCRIPT
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function(){boxOpen()},5000);
function boxOpen(){
$('.fbox').fadeIn('slow');
}
function boxClose(){
$('.fbox').fadeOut('slow');
}
$('.close').click(function(){
boxClose();
});  
});
</script>

jQuery min file is very important, and the setTimeout is to open the image or box within a sec. here I declare 5000, which means 5 sec. just used fade In and fade Out concept for this.

CSS
<style>
.fbox {
width:250px;
box-shadow:0 0 80px #333;
border:15px solid #fff;
margin:0 auto;
margin-top:150px;
margin-left:550px;
position:fixed;
z-index:1;
display:none;
}
.close {
padding:5px;
color:#000;
background-color:#fff;
cursor:pointer;
position:absolute;
}
</style>

You can set image as per your wish. Position-fixed; is to fix the image in the same place while scrolling.