Centering a CSS div layer in your browser window

Some time ago I needed to create a popup window on a web page, and it had be centered in the browser window. “Couldn’t be that hard” was my first thought, although I haven’t programmed anything in JavasScript for years.

So using CSS and Javascript, this was actually a pretty easy job to do. The only hard thing to do, was making it browser indepedent. But in the end, even this wasn’t so hard at all since most of these steps have been thoroughly described on the Interweb.

What we will need is

• a CSS file
• a JavaScript file
• a HTML file

The CSS portion is actually very easy:
– Save this into a file called style.css

#blanket {
    display: block;
    position:absolute;
    width:100%;
    height: 100%;
    top:0px;
    left:0px;
    z-index: 9998;
    background-color:#111;
    opacity: 0.65;
    filter:alpha(opacity=65);
}
#popUpDiv {
    display: block;
    position:absolute;
    width:450px;
    height:500px;
    z-index: 9999;
    overflow: auto;
    padding-left: 4px;
    padding-right: 4px;
    background-color:#eeeeee;
}

As you can see: no rocket science. We create two layers: blanket and popUpDiv. The blanket layer will create a gray transparent layer over the entire page. The popUpDiv layer will create … well, I think it’s clear what this layer will do 😉

The JavaScript portion contains a bit more code. It will contain four functions:

• toggle(): toggle the visibility of a layer
• create_blanket(): calculate the size of the blanket and display
• create_popup(): calculate the position of the popup layer and display
• popup(): wrapper function which calls toggle(), create_blanket(), create_popup()

Let’s start with the toggle() function, because that’s the shortest and easiest one.

function toggle(div_id) {
        var el = document.getElementById(div_id);

        if (el.style.display == 'none') {
                el.style.display = 'block';
        }
        else {
                el.style.display = 'none';
        }
}

Again, no rocket science. This procedure has been described and explained a million times on the Interweb, I will not redo it overhere.

Secondly, the create_blanket() function requires a bit more attention, since it’s more than 4 lines of code. 🙂
In this function, we will try to get the window height. We’ll do this in two different ways: one for Mozilla based browsers, one for Internet Exploder browsers.

if (typeof window.innerHeight != 'undefined') {
    height = window.innerHeight;
}
else {
    height = document.documentElement.clientHeight;
}

But then again … we could have just called document.documentElement.clientHeight since this is also supported by Mozilla based browsers.
The variable height will contain the browser height.
But, since we don’t all have huge screens which eliminates the usage of scrollbars, we will have to check if this height variable is smaller or bigger than the scroll area of the browser.

if ((height > document.body.parentNode.scrollHeight)
        && (height > document.body.parentNode.clientHeight)) {

        blanket_height = height;
}
else {
        if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
                blanket_height = document.body.parentNode.clientHeight;
        }
        else {
                blanket_height = document.body.parentNode.scrollHeight;
        }
}

And finally we’ll create this blanket:

var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';

So on with the create_popup() function. This function will first retrieve information about the different dimensions required to calculate the position of the popup. The following information is required:

• scroll_width: amount of pixels scrolled from left
• scroll_height: amount of pixels scrolled from top
• client_width: width of the browser (without scrollbars, menubars, padding, …)
• client_height: height of the browser (without scrollbars, menubars, padding, …)
• popup_width: popup width defined in CSS stylesheet file
• popup_height: popup height defined in CSS stylesheet file

First the scroll width and scroll height:

if( typeof( window.pageYOffset ) == 'number' ) {
        //Netscape compliant
        scroll_height = window.pageYOffset;
        scroll_width = window.pageXOffset;
} 
else if( document.body
        && ( document.body.scrollLeft || document.body.scrollTop ) ) {
        //DOM compliant
        scroll_height = document.body.scrollTop;
        scroll_width = document.body.scrollLeft;
} 
else if( document.documentElement
        && ( document.documentElement.scrollLeft
            || document.documentElement.scrollTop ) ) {
        //IE6 standards compliant mode
        scroll_height = document.documentElement.scrollTop;
        scroll_width = document.documentElement.scrollLeft;
}

Secondly the client height and width:

var client_height = document.body.parentNode.clientHeight;
var client_width  = document.body.parentNode.clientWidth;

And last the popup height and width as stated in the CSS stylesheet file:

var popup_height = parseInt(window.getComputedStyle(popUpDiv, "").getPropertyValue('height'));
var popup_width  = parseInt(window.getComputedStyle(popUpDiv, "").getPropertyValue('width'));

We need to wrap these values from the CSS stylesheet file around the JavaScript function parseInt() since the .getPropertyValue() function will return the values with ‘px’ at the end. (e.g.: 400px)

Based on the above information, the position from top and left will be calculated:

var left    = client_width  / 2 + scroll_width  - (popup_width / 2);
var top     = client_height / 2 + scroll_height - (popup_height / 2);

The only thing left to do is, is sending these position values to the browser by simply changing the CSS values for this DIV object:

popUpDiv.style.left  = left + 'px';
popUpDiv.style.top   = top + 'px';

The final function, popup(), will be the wrapper function called from within the HTML code.

function popup(windowname) {
    create_blanket(windowname);
    create_popup(windowname);
    toggle('blanket');
    toggle(windowname);
}   

So now we only need some HTML code to test this!
Click here to have a demo page (so where you could do right click + ‘View Source’)