I have a DHTML ajax pop up that I would like to have centered in the page as it is currently left justified. Also, I would like it to only show the first time a user views the page. Here is the code:
<script type='text/javascript'>
// Browser safe opacity handling function
function setOpacity( value ) {
document.getElementById("styled_popup").style.opacity = value / 10;
document.getElementById("styled_popup").style.filter = 'alpha(opacity=' + value * 10 + ')';
}
function fadeInMyPopup() {
for( var i = 0 ; i <= 100 ; i++ )
setTimeout( 'setOpacity(' + (i / 10) + ')' , 8 * i );
}
function fadeOutMyPopup() {
for( var i = 0 ; i <= 100 ; i++ ) {
setTimeout( 'setOpacity(' + (10 - i / 10) + ')' , 8 * i );
}
setTimeout('closeMyPopup()', 800 );
}
function closeMyPopup() {
document.getElementById("styled_popup").style.display = "none"
}
function fireMyPopup() {
setOpacity( 0 );
document.getElementById("styled_popup").style.display = "block";
fadeInMyPopup();
}
document.body.onload = window.setTimeout("fireMyPopup()", 1000);
</script>
<div id='styled_popup' name='styled_popup' style='width: 380px; height: 300px; display:none; position: absolute; top: 150px; left: 50px; zoom: 1'>
<table width='380' cellpadding='0' cellspacing='0' border='0'>
<tr>
<td><img height='23' width='356' src='images/x11_title.gif'></td>
<td><a href='javascript:fadeOutMyPopup();'><img height='23' width='24' src='images/x11_close.gif' border='0'></a></td>
</tr>
<tr><td colspan='2' style='background: url("images/x11_body.gif") no-repeat top left; width: 380px; height: 277px;'>
<div align="center">
<form action="freeoffer_thanks.asp" method="post">
<table width="250" border="0" cellspacing="2" cellpadding="0">
<tr>
<td colspan="2" align="center"><span class="pageheader">Sign Up to Learn About <br />
Your FREE $50 Gift</span><br /><br />
</td>
</tr>
<tr>
<td width="6%" class="text" align="center"><strong>Name:</strong></td>
<td width="94%" align="center"><input name="Name" type="text" size="25" /></td>
</tr>
<tr>
<td class="text" align="center"><strong>Email:</strong></td>
<td align="center"><input name="Email" type="text" size="25" /></td>
</tr>
<tr>
<td class="text" align="center"><strong>Phone:</strong></td>
<td align="center"><input name="Phone" type="text" size="25" /></td>
</tr>
<tr>
<td colspan="2" align="center">
<br />
<label>
<input type="submit" name="Submit" value="Submit">
</label></td>
</tr>
</table>
</form>
</div>
</td></tr>
</table>
</div>
Any help is greatly appreciated. Thanks.