DHTML pop up help

Question

foundsheep 0 Junior Poster

16 Years Ago

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.

html-css javascript

3 Contributors
4 Replies
126 Views
1 Week Discussion Span
Latest Post 16 Years Ago Latest Post by Troy III

Luckychap 68 Posting Pro in Training

16 Years Ago

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.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

foundsheep 0 Junior Poster · Answer 1 · 2008-07-08T23:24:34+00:00

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.

Luckychap 68 Posting Pro in Training · Answer 2 · 2008-07-09T00:19:08+00:00

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>

Troy III 272 Posting Pro · Answer 3 · 2008-07-19T00:01:43+00:00

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.