AF
HomeTagSubmit NotesAsk AnythingLoginSubscribe Us
AF
1. Feel Free to ask and submit anything on Anyforum.in and get satisfactory answer
2. Registration is not compulsory, you can directly login via google or facebook
3. Our Experts are looking for yours ?.



jquery-popup: How to add sliding stylish popup on a webpage?

I want to add sliding up-down stylish popup on a web page by using javascript or jquery.

jquery x 12
popup x 1
Posted On : 2014-04-23 01:34:50.0
profile Garima Gupta - anyforum.in Garima Gupta
596129554549
up-rate
5
down-rate

Answers


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.2
Cross Image
Overlay Image
Complete Popup Example(.zip)

Posted On : 2014-04-23 01:51:02
Satisfied : 1 Yes  0 No
profile Saksham Kumar - anyforum.in Saksham Kumar
73433936114
Reply This Thread
up-rate
5
down-rate



Post Answer
Please Login First to Post Answer: Login login with facebook - anyforum.in