0

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.

3
Contributors
4
Replies
5
Views
9 Years
Discussion Span
Last Post by Troy III
0

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.

0

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.

0

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>
0

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 topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.