I am going to provide you a source code of Jquery stylish sliding up down popup. Just copy and paste the following code on your webpage:
Popup.html:
-------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Javascript/Jquery Sliding Popup- AnyForum</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<style>
/* Style for overlay and box */
.overlay{
background:transparent url(images/overlay.png) repeat top left;
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;
}
.box{
position:fixed;
top:-200px;
left:30%;
right:30%;
background-color:#fff;
color:#7F7F7F;
padding:20px;
border:2px solid #ccc;
-moz-border-radius: 20px;
-webkit-border-radius:20px;
-khtml-border-radius:20px;
-moz-box-shadow: 0 1px 5px #333;
-webkit-box-shadow: 0 1px 5px #333;
z-index:101;
}
.box h1{
border-bottom: 1px dashed #7F7F7F;
margin:-20px -20px 0px -20px;
padding:10px;
background-color:#ff5500;
color:#fff;
-moz-border-radius:20px 20px 0px 0px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-khtml-border-top-left-radius: 20px;
-khtml-border-top-right-radius: 20px;
text-align:center;
}
a.boxclose{
float:right;
width:26px;
height:26px;
background:transparent url(images/cancel.png) repeat top left;
margin-top:-30px;
margin-right:-30px;
cursor:pointer;
}
</style>
<body>
<div class="content">
<!-- The activator -->
<a class="activator" style="cursor:pointer;" id="activator">Click me to popup</a>
</div>
<!-- The overlay and the box -->
<div class="overlay" id="overlay" style="display:none;"></div>
<div class="box" id="box">
<a class="boxclose" id="boxclose"></a>
<h1>Important message- anyforum.in</h1>
<p>
Type your meassage Here.
To close this click on cross button.
</p>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$(´#activator´).click(function(){
$(´#overlay´).fadeIn(´fast´,function(){
$(´#box´).animate({´top´:´160px´},500);
});
});
$(´#boxclose´).click(function(){
$(´#box´).animate({´top´:´-200px´},500,function(){
$(´#overlay´).fadeOut(´fast´);
});
});
});
</script>
</body>
</html>
If you want to show it on page load just make the following changes in above code:
1. Remove: <a class="activator" style="cursor:pointer;" id="activator">Click me to popup</a>
2. Change the events by replacing the code: $(´#activator´).click(function(){
By this code: $(window).load(function(){
***************************************************************************************
Output:
Click Here To View Demo
Important Download Links:
------------------------------
JQuery 1.3.2Cross ImageOverlay ImageComplete Popup Example(.zip)
