animated popup box

How can I animate a popup div layer so that it displays from the center of the popup box and expands up and down until it is totally displayed?

<script language='Javascript'>

function doPop() {
  if (document.getElementById('popup').style.display == 'inline') {
    document.getElementById('popup').style.display = 'none';
  } else {
    document.getElementById('popup').style.display = 'inline';
  }
}

</script>

<div id='popup' style='position:absolute; display:none; border:5px solid #000000; background-color:#FFFFCC; solid #000000; top:53px; left:25px; width:200px; height:50px;'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
  <tr>
    <td>test</td>
  </tr>
</table>
</div>

<br><br>

<table border='0' cellpadding='0' cellspacing='0' width='100%'>
  <tr>
     <td height='50'>
       <input onClick='doPop();' readonly type='text' name='something' style='cursor:hand; width:100px; border:1px solid #CCCCCC;'>
     </td>
  </tr>
</table>
skiboy825Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
dakydConnect With a Mentor Commented:
How about something like this?  You have to set the fullHeight & fullWidth variables to the largest that you want your popup to appear.  The numSteps variable controls how fast the popup grows, the more steps there are, the slower the popup grows.  As for how the code works, it just keeps a counter from 0 to numSteps, and the resize() function calculates the width/height based on that counter.  The resize() function just keeps getting called until stepNum > numSteps.  Hope that helps.

<script type="text/javascript">
var fullHeight = 50;
var fullWidth = 200;
var numSteps = 50;
var stepNum = 0;

function doPop() {
  obj = document.getElementById("popup");
  if (obj.style.display == 'inline') {
    obj.style.display = 'none';
  } else {
    obj.style.width = "0px";
    obj.style.height = "0px";
    obj.style.display = 'inline';  
    timer = setInterval("resize()", 500/numSteps);
  }
}

function resize()
{
  if (stepNum > numSteps)
  {
    clearInterval(timer);
    return false;
  }

  var w = Math.floor((fullWidth/numSteps) * stepNum);
  var h = Math.floor((fullHeight/numSteps) * stepNum);
  obj.style.width =  w + "px";
  obj.style.height =  h + "px";
  stepNum ++;  
}
</script>

<div id='popup' style='position:absolute; display:none; border:5px solid #000000; background-color:#FFFFCC; solid #000000; top: 53px; left: 25px; overflow: hidden;'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
  <tr>
    <td>test</td>
  </tr>
</table>
</div>

<br><br>

<table border='0' cellpadding='0' cellspacing='0' width='100%'>
  <tr>
     <td height='50'>
       <input onClick='doPop();' readonly type='text' name='something' style='cursor:hand; width:100px; border:1px solid #CCCCCC;'>
     </td>
  </tr>
</table>
0
 
Cem TürkSenior Software EngineerCommented:
No comment has been added to this question in more than 21 days, so it is now classified as abandoned.

I will leave the following recommendation for this question in the Cleanup topic area:
    Accept: dakyd

Any objections should be posted here in the next 4 days. After that time, the question will be closed.

cem_turk
EE Cleanup Volunteer
0
All Courses

From novice to tech pro — start learning today.