Onload Fancy box Using Jquery

Onload Fancy box using Jquery, yes it may harmful to web page. it is like a popup box. popup box is one of the most irritating thing in web designing and web development, but most of them need this script for their own, personal and e-commerce site.

DOWNLOAD             LIVE DEMO

It is very simple thing, it is similar like a alert script in java script. let see the coding for the Onload Fancy box using Jquery. here in the script the box will be open after 5 minutes of the page load. 

CODE 

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

Just call the image and class="close" for close the image box. as the above code.

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 important one, and the setTimeout is to open the image or box within a sec. here i declare 5000, which means 5 sec. just used fadeIn and fadeOut 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>

i just fix the image in center of my browser, change it as your wish. position:fixed; is to fix the image in the same place while scrolling. i hope this may useful and interesting. 

RELATED POST:

Accordion toggle using Jquery with Bootstrap

Dynamic Data Table using DataTable Jquery

Drag and Drop Concept using Jquery

Image gallery with lightbox effect using Jquery

Resize the font using Query

Image slider with random animation effects using Jquery

Animated scroll to top by using Jquery

Create custom file chosen input type using Css and Jquery

Facebook style Scroll bar using Jquery

Browser full screen API using Query