Saturday, June 6, 2009

Simple popup with cool effects

There are many ways of adding popup in the application. But the most simple and beautiful way of adding it will be with the help of prototype, scriptaculous and very little CSS.

Prototype.js is a javascript library written by Sam Stephenson. And adding scriptaculous with that will help to add amazing cool effects for displaying information more effectively.

For example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> Simple popup with cool effects </title>
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js?load=effects" type="text/javascript"></script>
<style type="text/css">
body{
background:#CFDEE2;
margin:0;
font:11px verdana;}

a {
color:#fff;
font-weight:bold;
text-decoration:none}
a:hover{ text-decoration:underline}

#title{
background:#CB6D23;
margin:0;
padding:0;
height:40px;
line-height:40px;}

#close{
background:#CB6D23;
margin:0;
padding:0;
height:30px;
line-height:30px;}

#close a{ float:right;}

#close a:hover{ text-decoration:none}

#wrapper{
width:600px;
height:100%;
margin:0 auto;
background:#fff}

p{width:80%; margin:20px auto}

#hiddendiv{
position:absolute;
background: #fff;
top:50%;
left:50%;
margin: -100px 0 0 -200px;
width: 400px;
height: 200px;
border: 4px solid #CB6D23}

</style>
</head>
<body>
<div id="wrapper">

<div id="title"> <a href="#" onclick="$('hiddendiv').appear(); return false;">Show me the popup</a></div>
<div id="hiddendiv" style="display:none">
<div id="close"> <a href="#" onclick="$('hiddendiv').fade(); return false;">[X]</a> </div>
<div> You can also give some other cool effects to this popup. </div>
</div> <p>This is the most easy way of adding the popup with cool effects. </p> </div>

</body>
</html>


Other effects can be found at scriptaculous combination of effects.

And can download from here

No comments:

Post a Comment