I’m working on a new newsletter project, and will be using a huge amount of Ajax in it. One of the features I want to implement will be creating and editing entries in address-books, etc, with “popup” forms.
In order to make those forms really stand out from the rest of the page, I thought it was important to shade the rest of the page. A few seconds thought came up with the perfect solution.
What happens is that the form for editing/etc is created with a z-index 2 above the rest of the page, then a half-transparent black layer is placed between it and the rest of the page.
A few hacks were needed for most of the main browsers:
- for Internet Explorer, I had to use
filter:alpha(opacity=num)to do the opacity.
- Opera does not support
opacity, so I used a semi-opaque PNG image.
- Konqueror supports neither
opacitynor semi-opaque PNGs, so I used a cross-hatched GIF image.