Question

I am working on a modal “box” to float over the rest of a page and to gray out the rest of the page.

I ran into IE bug with z-order by have resolved that issue.

The DIV, named overlay, uses a CSS class, also named overlay, which is as follows:

border: 4px double black;
padding: 6px;
visibility: hidden;
z-index: 3000;
position: fixed;
display: block;
font-family: Arial,Helvetica,sans-serif;
background-color: #3366ff;
color: white;
overflow: auto;
text-align: left;
max-width: 50%;
max-height: 90%;

There is a div named grayout which is used to, well, grayout the rest of the page.

I’m generating the div’s with some writeln statements in order to try and handle IE6 correctly. Regardless, there is no problem with the generated code, you can look at it with IE8 Developer Tools or Firefox with Firebug and it is just fine, as for as syntax.

I’m going to hard code the div’s, in a test page on my system, to make sure the dynamic creation is not causing this problem. I will post back here if it is.

The problem I’ve run into is that IE8 displays a vertical scroll bar, if I make the browser window small enough, but it does not work – clicking on the scroll bar does nothing.

It works fine with Firefox 3.6.17

You can test the page at http://www.bobnovell.com/test/modalemailtext.html

When you load the page, the “box” will be visible. Click either the Email button or the Close Window button (in the upper right corner) and the box will close.

Reload the page to get the box visible again.

When the box is visible, resize the browser window such that the entire box is not visible. Both IE8 and Firefox 3.6.17 automatically show the vertical scroll bar when you resize the window but the scroll bar does not work with IE8. It works just fine with Firefox. You can also try reloading the page after you reduce the size of the window – it does not change the symptoms.

What am I overlooking?

I made a test page with nothing on it but a div with same CSS class and put in some text. When I reduce the size of the window to get the scroll bar, the scroll bar works in both IE8 and Firefox – so the problem lies with some other part of the page, something which, perhaps, is independent of the overlay div definition.

Bear in mind that this is a “work in progress” and as such I’ve not really cleaned up other things on the page, yet. Also this is sort of a test of ideas.

Answer 1

To fix it: in modalbox.js remove the filter: alpha(opacity=100) and all other filter related stuff on #overlay.