<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Slide in elements</title>
<!-- Attach javascripts required for operation -->
<script language="javascript" src="http://krakjoe.com/js/prototype.js"></script>
<script language="javascript" src="http://krakjoe.com/js/scriptaculous.js"></script>
<!-- Search google for the scripts above they are available freely -->
</head>
<style type="text/css">
div#popin
{
position: absolute;
left: 500px;
background: white;
color: black;
font-weight: bold;
border: 1px solid blue;
width: 400px;
padding: 5px;
}
div#popin a
{
float:right;
color:black;
text-decoration: none;
vertical-align:middle ;
}
div#popin a:hover
{
float:right;
color:red;
text-decoration: none;
}
div#popintext
{
float:top;
}
-->
</style>
<body>
<div id="popin" style="display:none;">
<a href="javascript:void(0);" onclick="$('popin').hide();">[X]</a>
<div id="popintext">Welcome to the popup, I'll have whatever you want in here</span>
</div>
<script language="javascript">
window.onload=function()
{
Effect.Appear( 'popin' );
Effect.MoveBy( 'popin', 150, 0, { duration: 3 } );
};
</script>
</body>
</html>
prototype and scriptalicious, I used onload= but you could use same code in a function triggered by a link or whatever