An overlay is, simply put, a div
that stays fixed on the screen (no matter if you scroll) and has some sort of opacity.
This will be your CSS for cross browser opacity of 0.5:
#overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; z-index: 10000; }
This will be your jQuery code (no UI needed). You’re just going to create a new element with the ID #overlay. Creating and destroying the DIV should be all you need.
var overlay = jQuery('<div id="overlay"> </div>'); overlay.appendTo(document.body)
For performance reasons you might wanna have the DIV hidden and setting the display to block and none as you need it or not.
Hope it helps!
Edit: As @Vitaly so well put it, be sure to check your DocType. Read more on the comments on his findings..