css

/* Overlay */
#overlay { background:#000; cursor:pointer; display:none; height:100%; left:0; position:fixed; top:0; width:100%; z-index:9999; }
#overlay-content { background:#182335; display:none; height:560px; left:50%; margin-left:-325px; overflow:scroll-y; padding:20px; position:fixed; top:200px; width:610px; z-index:9999; }
#overlay-content section { background:#fff; height:100%; position:relative; }
#overlay-content .close { color:#fff; font-size:11px; text-transform:uppercase; position:absolute; right:0; top:-18px; }

js

var OVERLAY = (function($){
    var app = {}, $o, $c;

    app.hide = function (e) {
        e.preventDefault();
        $c.remove();
        $o.remove();
    };
    app.show = function(url, h){
        $o = $('<div id="overlay"></div>');
        $c = $('<div id="overlay-content" class="rounded4"><section><a href="#" class="close">close</a><iframe src="' + url + '" height="560" width="610" frameBorder="0"></iframe></section></div>');
        $('body').append($o, $c);
        $o.fadeTo(250, 0.65);
        $o.click(app.hide);
        $c.css({ top: -$c.height() - 200 });
        $c.delay(250).show().animate({ top:Math.floor(Math.min(Math.max(0, $(window).height() * 0.5 -$c.height() * 0.5 ), 200)) });
        $c.find('.close').click(app.hide);
    };
    $(app.init);
    return app;
} (jQuery));