You should see a popup appear and the background darken.
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
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
For those using ASP.NET AJAX, see their modal popup.
CodeProject has this
enhanced modal dialog example (demo),
#DialogWindow styles, which can be found,
modified, in the
head of this page.
for correctly sizing the transparent
div mentioned in the intro above. Joe King explains
how to use
shims to get around the problem of IE not allowing
being placed on top of
selects. Last but not least, it is possible
freeze panes; this helps in overcoming IE's deficiencies.
The following standards-compliant styles would take care of our transparent
div without a second thought:
ignoreMe assignment above is very important; otherwise IE does its thing and
somehow ignores the fact that
scrollLeft/Top are changing
(source). Another method
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.
I have left the
AddStyleRules functions in
element.style.width = 'expression((2 + 2) + 'px')' will throw an exception.
onResize event is used to keep the dialog box centered when the
window is resized. It is also used to simulate
for our favorite browser, IE.
Please let me know about anything that's incorrect.
width: 100%; height: 100%;when applied to an absolutely positioned
divelement with the
bodyas its parent when the
bodydoes not have any explicit height or width set; Firefox has no such issues.
selectbox will show through the modal background
divif it is not hidden or replaced with an equivalent
span. I've implemented both the
iframeshim approach and the replace-selects-with-spans approach; choose an option from the drop-down above to try the different methods out. The problem with using an
iframeshim is that
selectboxes will disappear, which is undesirable for our purpose. Replacing select elements works OK because IE supports
spanelements. Unfortunately, it also has rendering issues when one activates the modal window & background with the select in view, scrolls the main window, and then disables the modal background: the
selectjumps around until one forces a refresh of the physical browser window (e.g. by minimizing and then restoring it). In addition, the code to do the replacing is a bit brittle and will probably render incorrectly if the
selectshave special styling.
window.XMLHttpRequest == null, as IE7+ as well as other major browsers support this function.
If you found this tutorial helpful, please link to it. If you really want to show your appreciation... :-)