Home > Web > Web Modal Dialogs

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.

Categories: Web Tags: , ,
  1. September 2, 2009 at 9:19 am

    Just used this on http://www.oldnickpub.ro – check it out.

    To be able to close the dialog by clicking anywhere outside it, I attached the onclick=”javascript:closeDialog()” event to the “allover” div.

    Cosmin.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: