Center the DIV Element popup

Question

Hi,

I've created a div in my page, and it looks like -

<div id="progressThrobber" style="display: none;"><img src="/btweb/images/DeskTopIconLoading.gif" width="200" height ="40"/>              Loading...</div> 

Now the function that makes it appear as a popup on the page is underneath -

function showProgress(divId) { 
var divElement = document.getElementById(divId); 
divElement.style.display = ''; 
divElement.className='progressThrobberStyle';
divElement.innerHTML = '<table><tr><td align="center"><img                    src="/btweb/images/DeskTopIconLoading.gif"/></td></tr><tr><td nowrap="nowrap"><b>Loading...</b></td></tr></table>';

return true;

}

The style that positions the DIV is underneath -

 .progressThrobberStyle{ background-color:#FFFFFF;
   border:1px groove #999999;
  cursor:default;
  position:absolute;
 left:50%;
   top:50%;
 width:200px; height:100px; 
 margin:-100px 0 0 -50px;
  z-index:99;
  padding: 15px 15px 15px 15px;
}

I can't get this to be at the center irrespective of the position the user has already scrolled to. For example, if the user scrolls down to the very bottom of a page and hits submit, I need to show the popup in the center.

Any ideas?

Regards, Karan

Answer 1

Have you tried:

position: fixed;