OK here's what you have to do
Create a semi transparent gif, or transparent gif
create an image tag
<img src="transp.gif" style="zindex=20; position:absolute; Top:0; Left:0; witdh:100%; height:100%" />
and then create your div remember the index to set it above the image
<div id="hideUnhideEct" style="zindex=21">div content</div>
it still bears some experimenting and cross browser testing but I used this before, you should also consider using position:absolute on your div and image
Please keep in mind the position absolute restrictions in IE9 (for some reason they messed it up) easiest solution is to remove the doctype from the header of the document.
Remember when setting 100% width and height to include in your stylesheet
body, html, form{
width:100%;
height:100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
}