Cross browser modal div issues

I have a web page that supports a modal pop-up div over a transparent div.  It works perfectly in IE7, and fails hard in FF and Chrome.  I'm looking for a way to make this cross-browser.

The CSS in question:

.modal
{
  background-color: White;
  visibility: hidden;
  width: 50%;
  z-index: 10000;
  position: absolute;
  border: solid 1px Black;
  margin: 100px auto;
  padding: 15px;
}
.transparent
{
  filter: alpha(opacity=90);
  -moz-opacity: 0.9;
  opacity: 0.9;
  visibility: hidden;
  z-index: 9999;
  left: 0px;
  top: 0px;
  /*width:expression((document.body.offsetWidth ? document.body.offsetWidth : (document.documentElement.scrollWidth >= document.documentElement.offsetWidth ? document.documentElement.scrollWidth : document.documentElement.offsetWidth)) + "px");
  /*height: expression((document.body.offsetHeight ? document.body.offsetHeight : (document.documentElement.scrollHeight >= document.documentElement.offsetHeight ?     document.documentElement.scrollHeight : document.documentElement.offsetHeight)) + "px"); */
  /*width: expression(document.getElementById("fullPageDiv").offsetWidth);
  height: expression(document.getElementById("fullPageDiv").offsetHeight);*/
  position:      absolute;
  background-color: Gray;
  text-align: center;
  width:expression((document.documentElement.scrollWidth >= document.documentElement.offsetWidth ? document.documentElement.scrollWidth : document.documentElement.offsetWidth) + "px");
  height: expression((document.documentElement.scrollHeight >= document.documentElement.offsetHeight ? document.documentElement.scrollHeight : document.documentElement.offsetHeight) + "px");
}
full
{
  height: 100%;
  width: 100%;
}

The commented out sections of the CSS are approaches that I believed would work, but do not.

The HTML is as follows:
<div id="fullPageDiv" class="full">
  <div id="maskingDiv" class="transparent">
    <div id="modalBox" class="modal">                  
      <uc1:Controls_ClientSelector ID="clientSelector" runat="server"/>
        <div align="center">
          <a class="style8black" href="javascript:void(0);" onclick="hideModal();">Hide</a>
        </div>
      </div>
    </div>
     ............
    <a href="javascript:void(0);" onclick="showModal();">Change</a>
    .............
</div>

The javascript is as follows:

function showModal()
{
  showMask();
  document.getElementById("modalBox").style.visibility = "visible";
  document.getElementById("modalBox").style.left = Math.round(document.documentElement.clientWidth / 3) + "px";
  document.getElementById("modalBox").style.top = Math.round(document.documentElement.clientHeight / 3) + "px";
}
                                    
function showMask()
{
  document.getElementById("maskingDiv").style.visibility = "visible";
}

function hideModal()
{
  document.getElementById("modalBox").style.visibility = "hidden";
  document.getElementById("maskingDiv").style.visibility = "hidden";
}

The end goal, which works correctly in IE 7 is that upon clicking the anchor, "maskingDiv" covers the entire browsable area (the page will always have a vertical scrollbar, yet may or may not have horizontal scrollbar).  On that page "modalBox" will also be displayed on top of "maskingDiv". Users will not be able to click on any elements outside of the modal box until they've hidden the modal box (this will eventually be changed, but until it works in all browsers, this is the functionality).

However, in Chrome and FF, "maskedDiv" never displays, and "modalBox" is horizontally sized to about a tenth of what is necessary.  Also, since "maskedDiv" does not display, there is no modality to the behavior.

Can someone help me with what I've missed?

Thanks