Web Modal Dialogs

As I highlighted in a previous post, nowadays transparency plays an important role in web pages. And you can do a lot with it, especially regarding visual aspect on web interactive applications. How you can make an element transparent, and more importantly do it cross-browser, I described in my previous post, so please refer to it,as I will not insist on that one anymore.
I will tell you a little trick that will help you improve the look and feel of your web site. If you want a modal dialog in your desktop applications is pretty simple. You will probably think that the things are getting complicated with web pages, but it isn’t so. And this is what I’ll show you how.
First of all, let’s start by simply displaying a dialog. We will simply use for this an absolute positioned DIV, which is much better experience than a browser dialog window (using window.open()).

<DIV id="aDialog">Put whatever content you want in here</DIV>

and the CSS will look like

#aDialog {
    position: absolute;
    z-index: 10;
    width: 400px;
    height: 300px;
    top: 150;
    left: 200;

    background-color: white;
}

This DIV can shown/hidden using JavaScript

document.getElementById("aDialog").style.display = "block" / "none";

But this is not modal as you can still interact with the rest of the page, so let’s make it modal. Much simpler than you think. Just put a div all over the page.

<DIV id="allover"></DIV>

and the CSS …

#allover{
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    background-color: black;
}

So now, everything will be black except your previously created dialog. But probably you won’t exactly like this, but rather everything blurred except your dialog. So the new CSS will be

#allover{
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    background-color: black;
    opacity: 0.5;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
    -moz-opacity: 0.5;
}

For more interesting effects you can choose also another background color or even an image. The z-index of the allover DIV should be bigger than the one of the document, but smaller than the one of the dialog. The allover DIV can shown/hidden in the same way as the dialog.
One more thing, before ending this. If you probably tried or just wondering why we need two different DIVs and not simply using only one, the answer is quite simple. If a DIV is transparent, then all its child DIVs are transparent, even tough you modify accordingly the CSS properties.
Hope this trick is useful for you and good luck in creating nice web applications.
And just to see everything working here is an example.

Web transparency

If a few years back, transparency was the cool kid in user interfaces, nowadays it’s a must if you want to have a user interface that is not dull and lives in the present.
And I’m talking here not only about desktop graphical interfaces, but also about web interfaces. With all the comotion about Web2.0 and web applications, transparency is something that you should definately see 😉 in your web site.

But how to do it? The browsers wars will definately be a battle to take and win here. But to keep it simple, I’ll tell that there are three ways to do it: W3C, Internet Explorer and Mozilla.

• W3C. If we will go to their site http://www.w3.org/TR/css3-color/#opacity we will see that the CSS property handling this is called opacity. The possible values are floats between 0 and 1, with 0 totally transparent and 1 totally opaque. The intermediate values represent different levels of transparency.
  
  But you probably noticed that this is a CSS version 3 property and unfortunately very few browsers supports it currently. Latest versions of Firefox do support this (I tested it with version 2.0.0.8).
• Mozilla. In Mozilla the things are the same, but the name of the CSS property is different: -moz-opacity. As this is an obsolete way, you should prefer the CSS3 property and use this only for backward compatibility.
• Internet Explorer. Here things are a little bit more complicated. You should use the filter property and the Alpha. As I said, a little bit more complicated, that’s why here’s below a code sample:
  

  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

  The opacity argument can have integer values between 0 and 100, with 0 totally transparent and 100 totally opaque.

And this is for CSS. But what if you want, e. g. to create a fade in/fade out effect and to dinamically modify the transparency? Then you should simply use JavaScript and I think the best way to explain how it is through code samples.

• W3C method:
  

  element.style.opacity = opacity;

• Mozilla method:
  

  element.style.MozOpacity = opacity;

• Internet Explorer method:
  

  element.style.filter = 'alpha(opacity=' + (opacity * 100) + ')';

In these samples, the opacity parameter value has the same semantic as in the CSS3 case. Please note that in the IE code sample this value is multiplied by 100.
And now if we put all these together we have cross browser methods for getting and setting the transparency of an HTML element:

function getOpacity(element) {
    var v = element.style.opacity;
    return ((v == null || isNaN(v)) 
            ? 1 : element.style.opacity);
}

function setOpacity(element, opacity) {
    if (opacity < 0)
        opacity = 0;
    if (opacity > 1)
        opacity = 1;
    element.style.opacity = opacity;
    
    if (document.getElementById("ie").checked 
            && (element.style.filter != undefined))
        element.style.filter = 'alpha(opacity=' 
                + (opacity * 100) + ')';

    if (document.getElementById("moz").checked 
            && (element.style.filter == undefined))
        element.style.MozOpacity = opacity;
}

You can see these samples working here.