Pop ip window from bottom fly out

JavaScript
1

Hi there…

Please look at the below link first

Link here

Look after loading the page a pop up window arrived " News lettersubscription box" .

Any Idea about how to do this?? I need guideline. Please help me…

Advanced thanks for the help

2

Hi there…

i managed the popup

link here

But what i need is …

#The popup should appear from bottom to middle. i mean the transition effect should slide out from bottom.
#After submit form… a message appear " thanks you"… in another page. but i want to appear it in the middle of pop up modal

Advance Thanks

Here is my code…

<!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=utf-8” />
<title></title>

<script type=“text/javascript” src=“http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js”></script>

<script type=“text/javascript”>
$(document).ready(function() {

	var id = '#dialog';

	//Get the screen height and width
	var maskHeight = $(document).height();
	var maskWidth = $(window).width();

	//Set heigth and width to mask to fill up the whole screen
	$('#mask').css({'width':maskWidth,'height':maskHeight});
	
	//transition effect		
	$('#mask').fadeIn(1000);	
	$('#mask').fadeTo("slow",0.8);	

	//Get the window height and width
	var winH = $(window).height();
	var winW = $(window).width();

	//Set the popup window to center
	$(id).css('top',  winH/2-$(id).height()/2);
	$(id).css('left', winW/2-$(id).width()/2);

	//transition effect
	$(id).fadeIn(2000);
	

//if close button is clicked
$('.window .close').click(function (e) {
	//Cancel the link behavior
	e.preventDefault();
	
	$('#mask').hide();
	$('.window').hide();
});	


//if mask is clicked
$('#mask').click(function () {
	$(this).hide();
	$('.window').hide();
});

});

</script>

<script type=“text/javascript”>
$(function(){
$(“form#emailsignup_form”).submit(function(e){
e.preventDefault();
$.post(
“processdata.php”,
$(this).serialize(),
function(data){
//Your code to process returned data goes here
$(“#boxes”).text(“Thank you!”);
}
);
});
});

</script>
<style type=“text/css”>
body {
font-family:verdana;
font-size:15px;
}

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
.heade {
background-color: #039;
}
#boxes .window {
position:absolute;
left:0;
top:0;
width:600px;
height:400px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #dialog {
width:700px;
height:203px;
padding:10px;
background-color:#ffffff;
}
</style>
</head><body>

<div id=“boxes”>
<div style=“top: 199.5px; left: 551.5px; display: none;” id=“dialog” class=“window”>
<div class=“heade”>Confor class “heade” Goes Here</div>
<form id=“emailsignup_form” method=“post” action=“”>
<input id=“cemail” name=“email” size=“25” class=“required email” />
<input class=“submit” id=“submitemail” type=“submit” value=“Submit”/>

</form>

</div>
<!-- Mask to cover the whole screen –>
<div style=“width: 1478px; height: 602px; display: none; opacity: 0.8;” id=“mask”></div>
</div>
</body>
</html>