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
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.
and the CSS …
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
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.