I came across an interesting problem the other day. I was developing a way to have error dialog for our web application regardless of the web browser. I did not want to use the JavaScript alert message box. I could not use the IE Modal dialog. So I decided to display the error message in a DIV tag that would be centered on the screen and only made visible when there was an error. Then I thought, wouldn’t it be cool to be able to move the error dialog around the screen, in case it was covering up the form element that had a problem. I found dom-drag.js to be quite cool and very helpful.

To make the DIV tag overlay the existing page, I needed to set the Z-index of the DIV at a higher level then anything else on the page. I soon found that no matter how hard you tried, all DropDownList boxes and List boxes would show through the error dialog.

After some research, I soon found that this is an issue with Internet Explorer and wasn’t much I could do about it. It is because DropDownList boxes and List boxes are considered a windowed component in the browser and regardless the z-index you assign these components or the DIV that contains them, they will always float to the top. This issue is resolved in IE7, but the idea of making all customers upgrade to IE7 was not acceptable.

An iFrame is also windowed component. If I could put that iFrame in a DIV or TABLE that the visibility can be turned on or off, that would fix the problem of the other windowed components (drop down list and list box). I tried a DIV, but could not set the height to something specific so I could center the error dialog could be centered. I used the TABLE and could specify the height and it worked quite nice.

It wasn’t till later that I realized that everything under the TABLE, with no background, was not access-able. So once the error dialog window is made visible, the rest of the form elements can not be acted upon until you clear the error dialog.

To clear the error dialog, I needed to call a JavaScript function on the parent page to set the visibility of the TABLE equal to none. With out trying, I created my own modal dialog. Cool!

UPDATE:
Not used to this blogging stuff, so let me clarify.
Outside the FORM tag I set a Table to be width=100% and height=560 (or something big enough to cover what you need to, then centered in that table (one row with one cell) I placed an IFRAME that I will pass my error message to and then display. The page shown in the IFRAME will cover all form elements on the page behind it. All form elements not covered by the IFRAME, but covered by the Err_Table are unclick-able with exception to the DropDownList and ListBox. If need be, you could alwasys disable those controls prior to making the Err_Table viewable.

</div>
</form>
<table id=”Err_Table” style=”display: none;”><tr><td width=”100%” height=“100%”>
<iframe id=”Err_Message_Frame” src=”" frameborder=”no”
scrolling=”no” marginheight=”0px” marginwidth=”0″></iframe>
</td></tr></table>

Style:
#Err_Table
{ position: absolute;
top:0px;
width: 100%;
height: 560px;
background-color: Transparent;
border: solid 0px red;
vertical-align: middle;
text-align: center;
z-index: 100;
}

#Err_Message_Frame
{
width: 360px;
height: 300px;
background-color: white;
border: solid 0px black;
margin: 0px;
padding: 0px;
}