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 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.
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.
The following standards-compliant styles would take care of our transparent
div without a second thought:
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:
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.
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.
Please let me know about anything that's incorrect.
back width: 100%; height: 100%; when applied to
an absolutely positioned div element with the body as its
parent when the body does not have any explicit height or width set;
Firefox has no such issues.select box will
show through the modal background div if it is not hidden or replaced with an
equivalent span. I've implemented both the
iframe
shim 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 iframe shim
is that select boxes will disappear, which is undesirable for our purpose.
Replacing select elements works OK because IE supports display: inline-block for
span elements. 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 select jumps 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 selects
have 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... :-)