JQuery Tools Overlay for modal dialog broken under IE8

Question

I've been developing a website that has several modal dialog boxes. I've been using jQuery Tools Overlay for the dialog boxes. However, I've just discovered that it doesn't seem to work properly on IE8.

In Chrome (and I presume other browsers), the dialog is highlighted by darkening the rest of the page "below" it, but on IE8 the page "below" is obliterated - all you get is the dialog on a black background.

This appears to be nothing to do with the way I've configured it - the same problem is evident on the jQuery Tools website itself. If you click the link above and then click one of the two buttons headed "For User Interactions", then you'll see what I mean.

What's the deal? Does it simply not support IE8? If so, (a) grrrr... and (b) what else should I use?

Britannic

IE8 changed the way that the filter(alpha) was used in CSS to apply opacity to elements. I'm going to verify, but it sounds like the CSS is defined in the wrong order/format thus creating a 100% opaque background. – Delaminate

Answer 1

It works fine in IE8 from their site. (in both IE8 standards and Compatibility (~IE7) modes)

[Image on the left has a transparent black background, Image on the right has a white opaque background]

I can confirm however that it breaks in IE6 with a solid black background, square corners etc.

Can you provide some code or a link to your site? there might be a slight configuration difference that is causing it not to work for you.

Delaminate

It doesn't work for me! Though I'll be glad if it's just me. On that webpage, if I click "You clicked no", I get the dialog against a solid black (or actually dark gray) background. I'm using IE 8.0.6001.18904 on Vista. – Britannic

@suncliffe: the images work fine, it's the buttons below that are causing a problem. Click "You clicked no". – Britannic

Hmmm, the yes/no and input dialogs work fine for me in IE8 (stds and compatibility mode) and even work in IE6! (I don't have IE7 handy to test). The only glitch I saw was in IE6, the round info icon has a light blue background because IE6 doesn't handle the alpha (transparency) layer of PNG images. – Delaminate

Here's a screenshot of it in IE8. img717.imageshack.us/img717/4200/overlayc.png – Delaminate

Right back at ya with my screenshot: imgur.com/jWpYc.png If I felt confident that I was in a minority, I'd be very happy. Anyway, it's good to know that it does work at least sometimes :-) Thanks muchly. – Britannic