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.

Some code change:

[B]<table style='height: 100%; width: 100%;'>
<tr>
<td align='center' >[/B]

<div id='styled_popup' name='styled_popup' style='border:1px solid #000000; width: 380px; height: 300px; display:none; position: relative; 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<b></b>: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>


[B]</td>
</tr>
</table>[/B]

This will bring ur popup in middle.

That centered it but it also pushed the rest of the page down below the pop up. I want the pop up to be over top of the main content in the middle of the page.

then put that table at last and make its position absolute and make top, left also 0,0

<table style='position: absolute; top: 0px; left: 0px; width: 100%; height: 100%'>
<tr>
<td align='center' >
<div>Your popup div</div>
</td>
</tr>
</table>

</body>

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:


Any help is greatly appreciated. Thanks.

Since you've found sheep,
here, - take another one!

Below is your modified code that will put your popup in the center of any window size or client screen resolution.

<script src="Troy III CenterElement.js" type='text/javascript'></script>
<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";
	document.centerElementById("styled_popup")
	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>

This works almost as a 'browser extension'!
I've encapsulated the code into a js file, to enable other members of the forum to use it as needed.

[check the attachment file: 724 bytes]
***********************

Now about your second question:
- You should consider using cookies, and mark this thread as solved :')

Cheers.

Attachments
/* * * * 
	You may use this script freely for as long as you keep this signiture intact! 

	b.b. Troy III p.a.e. 
	7:06 PM 7/18/2008

	* * * */


document.centerElementById=
	function(id){
	    var el = document.getElementById(id);
	  if(el){
		el.style.position = "absolute";
	    var L = (Math.round((((document.body.offsetWidth/2)-(el.offsetWidth/2)) * 100) / document.body.offsetWidth) +"%");
		el.style.left = L;
	
	    var T = (Math.round((((document.body.clientHeight/2)-(el.offsetHeight/2)) * 100) / document.body.clientHeight) +"%");
		el.style.top  = T;
		}
	  else alert( "Element with id: [" + id + "] Not found!\nPlease check your spelling and try again.\n b.b. Troy III p.a.e." )    }
This article has been dead for over six months. Start a new discussion instead.