Overlay

Overlay.js

(function($){
    
    $.overlay = (function(){
        
        var f = function(params){
            
            var opts = $.extend({}, f.defaults, params),
                $window = $(window),
                winHeight = $window.height(),
                $elem = $("<div>").css(opts.css);

            if($elem.appendTo($("body")).height() < winHeight) {    //assume needs handholding ala IE6
                var $doc = $(document.documentElement),
                    $iframe = $("<iframe>").css({
                        top: 0, right: 0,
                        opacity: 0,
                        zIndex: opts.zIndex - 1
                    });

                $window.bind("resize.overlay", function(){
                    $elem.hide()
                         .height($doc.height())
                         .width($doc.width())
                         .show();
                });

                $elem = $elem.add($iframe)
                             .css({ position: "absolute" })
                             .height($doc.height())
                             .width($doc.width());
            }
            
            return $elem.remove();
        };
        
        f.defaults = {
            css: {
                position: "fixed",
                top: 0, right: 0, bottom: 0, left: 0,
                opacity: 0.5,
                backgroundColor: "#000",
                zIndex: 3
            }
        };
        
        return f;
        
    })();

})(jQuery);