FancyBox Report Viewer

by taa1953

HTML

<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<a id="open" href="javascript:;">Open me</a>

JavaScript

$("#open").click(function() {

    $.fancybox.open({
        content: '<iframe id="myFrame" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" src="about:blank"></iframe>',
        autoSize: false,
        width: '80%',
        height: '80%',
        scrolling: 'no',
        afterShow: function() {
            var oIframe = document.getElementById('myFrame');
            var iframeDoc = (oIframe.contentWindow.document || oIframe.contentDocument);
            iframeDoc.open();
            iframeDoc.write(myContent);
            iframeDoc.close();
        }
    });
});

var myContent = '<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><html xmlns=\"http://www.w3.org/1999/xhtml\"><head><title></title><style type=\"text/css\">@media screen{html,body{margin:0;padding:0;height:100%;width:100%}p{padding:5px;}#btn{margin:5px 0 0 5px;}}@media print{#btn{display:none;}p{margin:100px;}}</style></head><body><button onclick=\"window.print(); return false;\" id=\"btn\">Print Me!</button><p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit. Pellentesque ante felis, euismod ac volutpat vitae, viverra quis augue. Sed purus ligula, volutpat sed vehicula ornare, sodales sit amet enim. Vivamus quis ultrices turpis. In suscipit gravida metus posuere dignissim. In non urna nisl. Vivamus leo odio, semper vitae sagittis eget, venenatis non magna. Nulla nibh dolor, malesuada eget vulputate a, imperdiet ac neque. Praesent velit quam, sollicitudin ut lobortis vitae, consectetur eget eros. Integer iaculis lobortis tellus, non ornare nulla faucibus et. Vivamus elit eros, feugiat quis mollis vitae, condimentum a lectus. In eu diam consequat dui lobortis iaculis sit amet at neque.</p><p>Maecenas dui enim, bibendum id pharetra vitae, congue et quam. Aliquam tempus tortor tortor. Vivamus vitae tincidunt magna. Nulla id risus nec lacus cursus vestibulum. Vestibulum ultricies laoreet...