Modal Dialog Box in Javascript

Occasionally you want to be able to pop up a modal dialog box over your web page, so you can force the user to enter something before they continue. You could just use confirm(), but that's pretty lame and doesn't allow you to exercise much control over the user's input options. Yes/No? Okay/Cancel? Lame.

Well, the way to do it, of course, is with a transparent div! That'd be the background, and then you have another div that you put right in the middle of the screen, mimicking a popup window. You'll be able to see through the background div (kind of), but you can't click through it ... which makes it perfect.

First, you need to throw in the HTML:

<div id="modalBackgroundDiv" class="modalPopupTransparent" style="display: none;"> </div>

<div id="modalWindow" class="modalPopupWindow" style="display: none; width: 560px;">
    It's awesome that you can put whatever you want in here.
</div>

Then you need some CSS to make it so they actually work as planned:

div.modalPopupTransparent {
    filter: alpha(opacity=75);
    -moz-opacity: .75;
    background: #CCCCCC;
    position: absolute;
    top: 0px;
    left: 0px;
}

div.modalPopupWindow {
    position: absolute;
    background-color: #FFFFFF;
    border: 2px solid black;
    padding: 8px;
    text-align: left;
}

The most important thing here is that the background div's style has its opacity set to 75%. It has to be done twice because IE and Firefox use different commands for this. (Typical.) The second most important thing to notice is the absolute positioning. That's what allows them to display on top of everything else. It's not that useful if your transparent div shows up below the page, is it?

It's also not that useful if the modal dialog has no functionality and can't pop up. Which is why we now have to add in the Javascript:

function openModalWindow() {
        var div = $('modalWindow');
        var bgDiv = $('modalBackgroundDiv');

        var docDim = Element.getDimensions(document.body);

        //get the size of the window and calculate where the box should be placed
        var wDim = getBrowserWindowSize();
        var dDim = Element.getDimensions(div);

        div.style.top = ((wDim.height - dDim.height*2) / 2) + 'px';
        div.style.left = ((wDim.width - dDim.width) / 2) + 'px';

        if (docDim.height > wDim.height) {
            wDim.height = docDim.height;
        }

        bgDiv.style.width = wDim.width + 'px';
        bgDiv.style.height = wDim.height + 'px';

        Element.show(div);
        Element.show(bgDiv);
}

function closeModalWindow() {
    Element.hide('modalWindow');
    Element.hide('modalBackgroundDiv');
}

function getBrowserWindowSize() {
    var winW = 630, winH = 460;

    if (parseInt(navigator.appVersion)>3) {
        if (navigator.appName=="Netscape") {
            winW = window.innerWidth;
            winH = window.innerHeight;
        }
        if (navigator.appName.indexOf("Microsoft")!=-1) {
            winW = document.body.offsetWidth;
            winH = document.body.offsetHeight;
        }
    }

    var rval = {
        width: winW,
        height: winH
    };

    return rval;
}

To open the modal window, the first thing we need to do is grab a reference to the window, the background, and the document body. We then determine the size of the visible browser window (using a custom function, shown above) and the size of the modal dialog (using Prototype's handy method).

Since we want the transparent background to cover the entire page (not just what's visible), we set the height of the background to be the height of the document body instead of the browser window -- if necessary. That way the user can't scroll down and click something lower on the page if there's a modal dialog up.

Then we center the popup, make the background as big as it should be, and display them. Simple enough. Similarly, in order to close the window, we just hide both elements.

And there you have it. A nice, simple modal dialog, with a transparent gray background that dims out everything else on the page so the user knows what to focus on. I wouldn't use it too often, but in some cases it can be exactly what you want.

Enjoy!