Last updated on February 23rd, 2022 at 09:49 am
Jquery animated pop up with close option
This tutorial is a very simple approach on how to create a pop up box (information) box using Jquery and add some style using CSS.
The animation is unique and really an eye caching for the visitors of your site since the box blinks couple of times before coming to a halt.This kind of approach really makes the visitors read your website important notice without implementing complex javascript pop up window screens.
Here is the complete code.
<style>
#info{
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
position:relative;
color: #00529B;
background-color: #FBE5F8;
background-image: url('http://mistonline.in/wp/demo/mistonline.in_alert.jpg.png');
}
</style><script src="http://mistonline.in/wp/demo/jquery-1.2.3.min.js" type="text/javascript">
</script>
<!--Dont Delete This Notice, This code is from http://mistonline.in, the one stop reference for all web developers.
Please keep this above notice for our promotion purpose.Thank you very much-->
<script type="text/javascript">
$(document).ready(function(){
$(".close").click(function(){
$("#info").animate({left:"+=10px"}).animate({left:"-5000px"});
});
$("#info").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400)
.fadeOut(400).fadeIn(400);
});
</script>
<div id="info">
<a class="close" href="#close" style="float: right;"><img border="0" src="http://mistonline.in/wp/demo/close.jpg" /></a>
This is a test message from Mistonline.in, you can customize this accordingly. Click on close button on right to exit this box</div>
In the above script you can increase the FADE IN and FADE OUT capability of the script by adding fadeIn and fadeOut functions
admin