Double-Click Anywhere


You should see a popup appear and the background darken.

Introduction


The idea here is to disable all the elements in an html document and present a dialog which must be "processed" by the user before any other actions can be taken.  Doing so could be fairly easy: simply position a transparent div over the entire document with a higher z-index than any other element on the document.  Then put your pseudo-popup of choice in the center, giving it an even higher z-index.  As usual, IE6.0 throws several wrenches into the works.  Note that this effect is sometimes called lightbox.

For those using ASP.NET AJAX, see their modal popup.

Inspiration


CodeProject has this enhanced modal dialog example (demo), which uses a pretty complex javascript library.  The useful bits I got were the #ModalBG and #DialogWindow styles, which can be found, modified, in the head of this page.  30boxes.com was another source for inspiration, specifically its javascript for correctly sizing the transparent div mentioned in the intro above.  Joe King explains how to use iframe shims to get around the problem of IE not allowing divs from being placed on top of selects.  Last but not least, it is possible to use javascript in CSS declarations in IE, like in freeze panes; this helps in overcoming IE's deficiencies.

Some CSS


The following standards-compliant styles would take care of our transparent div without a second thought:

#modalBackground { position: fixed; left: 0; top: 0; width: 100%; height: 100%; }

Unfortunately, IE 6.x and older gets none of this right.  The following styles use CSS javascript expressions to make up for IE's retardation:

#modalBackground { position: absolute; left: expression(ignoreMe = document.documentElement.scrollLeft + "px"); top: expression(ignoreMe = document.documentElement.scrollTop + "px"); width: expression(document.documentElement.clientWidth + "px"); height: expression(document.documentElement.clientHeight + "px"); }

The ignoreMe assignment above is very important; otherwise IE does its thing and somehow ignores the fact that scrollLeft/Top are changing (source).  Another method for accomplishing position: fixed in IE is to invoke some quirks-mode magic, but I don't want to invoke quirks mode.  Instead, I use IE conditional comments to apply the second set of styles for version 5.x and 6.x; look at the source to see the ugliness.

An alternative to conditional comments is manipulation of stylehseets with javascript; I have left the InsertCssRule and AddStyleRules functions in to demonstrate how to do so.  Note that javascript-valued CSS must be added this way in IE; element.style.width = 'expression((2 + 2) + 'px')' will throw an exception.

OnWindowResize


The onResize event is used to keep the dialog box centered when the window is resized.  It is also used to simulate position: fixed; for our favorite browser, IE.

Discoveries


Please let me know about anything that's incorrect.

Issues


Support Tutorials like This


If you found this tutorial helpful, please link to it.  If you really want to show your appreciation... :-)