Creating a dark semi-transparent modal overlay covering the whole page

This tutorial demonstrates how to do this with CSS and jQuery:


I.e. placing a dark, semi-transparent, user-blocking/modal overlay (with a title in this case) over the whole page.

Works in all browsers including IE7. Doesn’t quite work properly in IE6 but may be acceptable.



Here are the images used:

overlay  overlay.png            spinner spinner.gif


Comments always welcome………………