In a number of recent projects, I’ve been needing to provide an overlay of sorts over an entire page or a number of elements on a page. Unfortunately, most options ship with extra weight – they include support for modal dialogs or some type of lightbox overlay all of which was overkill for what I needed.
To that end, I ended up writing a lightweight plugin that makes adding overlays trivially easy.
Simple Overlay for jQuery is a plugin that makes it easy to include overlays in your projects. It’s got support for several of jQuery’s built-in effects, CSS hooks for further customization, CSS3-glossy effects, and more.
In order to give greater control, the plugin also supports custom callbacks that fire once the overlay has been displayed and once it has been hidden.
For more usage instructions, downloads, and more information, you can grab the source code or fork it on GitHub.