Wondering what the easiest way to shadow box a page is? It’s really simple and can be accomplished with very little code.
Follow these simple steps and you will be set in no time,
1) include the jquery library in the head of your document
2) Add a div just below the body tag with id=”shadow” style=”display: none;”
3) add the following to your document.ready function or to an onclick event or whatever
$(‘#shadow’)
.css(“background”,”#000″)
.css(“position”,”absolute”)
.css(“z-index”,”9999″)
.css(“opacity”,”0″)
.css(“height”,($(‘body’).height() + 50) )
.css(“width”,$(‘body’).width());
$(‘#shadow’).toggle(function(){
$(‘#shadow’).animate({
opacity: “.7”
}, 1000)
)};
4) you can update the code in the shadow box with $(‘#shadowbox’).html(“html here”); or by placing whatever you want shadowboxed in the shadow box div
You are all set your page is shadowboxed with a 70% opacity, if you need to have the items display at 100% opacity, add a second div that is positioned absolute and z-indexed above the shadow with opacity 1 and you are even better off.