Set div to the vertical middle of the browser window

Our application shows custom HTML confirm message box, that we wanted to locate in the middle of the browser window.
If I would start from the scratch, I would use Ajax Control Toolkit  ModalPopup  
 
However, because the proprietary code to show div has been already written, I wanted just to set vertical position of the div.
 
I've created a function based on code from AlwaysVisibleControlExtender.js.
Initially it didn't work, because common.JS getClientBounds : function()  returned 0 clientHeight and clientWidth.
It is actually a known bug in ASP.NET AJAX documentation Control Toolkit, because for  

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > it is required to use
document.body.clientWidth instead of document.documentElement.clientWidth.

 

 
The created function is below. (I hope that I am compliant with http://www.codeplex.com/AjaxControlToolkit/license)
 

function SetVerticalMiddle(element)

{

    //Derived from http://www.asp.net/AJAX/AjaxControlToolkit/Samples/AlwaysVisibleControl/AlwaysVisibleControl.aspx AjaxControlToolkit.VerticalSide.Middle

    var y = 0;

    // Compute the width and height of the client

    // var CommonToolkitScripts = new AjaxControlToolkit._CommonToolkitScripts();

    // var clientBounds = CommonToolkitScripts.getClientBounds();

    // debugger;

    // var width = clientBounds.width;

    var height = getClientHeight();//clientBounds.height;

    if (document.documentElement && document.documentElement.scrollTop) {

        // x = document.documentElement.scrollLeft;

        y = document.documentElement.scrollTop;

    }

    else {

        // x = document.body.scrollLeft;

        y = document.body.scrollTop;

    }

    // Compute the coordinates

    // x = Math.max(0, Math.floor(x + width / 2.0 - element.offsetWidth / 2.0 ));

    y = Math.max(0, Math.floor(y + height / 2.0 - element.offsetHeight / 2.0 ));

    // element.style.left = x + 'px';

    element.style.top = y + 'px';

}

//copied from AjaxControlToolkit\Common\Common.js, fix from http://forums.asp.net/p/1002123/1323677.aspx#1323677

function getClientHeight() {

    /// <summary>

    /// Gets the height of the browser client window (excluding scrollbars)

    /// </summary>

    /// Browser's client height

    /// </returns>

    // var clientWidth;

 

    var clientHeight;

    switch(Sys.Browser.agent) {

    case Sys.Browser.InternetExplorer:

    // if (document.documentElement && document.documentElement.clientWidth)

    // clientWidth = document.documentElement.clientWidth;

    // else if (document.body)

    // clientWidth = document.body.clientWidth;

 

        if (document.documentElement && document.documentElement.clientHeight)

            clientHeight = document.documentElement.clientHeight;

        else if (document.body)

            clientHeight = document.body.clientHeight;

    break;

        // clientWidth = document.documentElement.clientWidth;

        clientHeight = document.documentElement.clientHeight;

    break;

    case Sys.Browser.Safari:

        // clientWidth = window.innerWidth;

        clientHeight = window.innerHeight;

    break;

    case Sys.Browser.Opera:

        // clientWidth = Math.min(window.innerWidth, document.body.clientWidth);

        clientHeight = Math.min(window.innerHeight, document.body.clientHeight);

    break;

    default: // Sys.Browser.Firefox, etc.

        // clientWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);

        clientHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);

    break;

    }

    return clientHeight;//new Sys.UI.Bounds(0, 0, clientWidth, clientHeight);

}

 

I wasn't able to use position:fixed (that supported by FireFox and IE 7) because the existing div is already inside DOM and not positioned properly without major changes of existing code.(There a a few posts describing hacks(too complicated and restrictive), how to emulate "fixed" in older browsers, e.g. IE 6 workaround for position:fixed,  Making IE 5.5+ use position: fixed ;position:fixed for Internet Explorer)
  
A few links about ASP.NET AJAX documentation Control Toolkit  ModalPopup:
 

Javascript variable declaration scope is different from C#.

It's well known that JavaScript is similar to C++/C#, but doesn't required explicit declaration of the variables.
However, it worth to read specification(e.g.  http://jennifermadden.com/javascript/variables.html )  to understand subtle differences.
 
I didn't know, that a variable implicitly declared within a function is  a global variable.
For example,
function foo() {
        g= 17;//it's global, will be visible outside the function after the function will be executed
          var x = 17;//local, not visible outside the function
}
          foo();
          println(g);//17
          println(x);//undefined
 
another rule(UPDATE:known browsers do not support it) : Depending on the system in which JavaScript is embedded, other objects whose scopes enclose the function currently executing (if any) are searched, starting from the innermost object, for a property identified by the simple name. If found, the simple name's scope is the object containing the property.
I understood the rule as it is not nesessary to pass local variables as parameters to calling function, but the calling function can see parents variables.
 
function foo() {
         var x = 17;//local, but should be visible in calling function according to the rule
         foo1();   
}
function foo1() {
          println(x);//should be 17 if called from foo, but known browsers do not support it.
}
However as it was pointed by Nitin Reddy Katkam,  neither Firefox's nor Internet Explorer's nor Safari implementation of Javascript  support this rule.
Also note, that in JavaScript constructor var can be used to implement private members and this to implement public fields. See "Private Members in JavaScript" article.
«September»
SunMonTueWedThuFriSat
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011