FancyBox Report Viewer

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

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;}}</style></head><body><button onclick=\"on_Click();\">Second FancyBox</button><script type=\"text/javascript\">function on_Click(){alert(\"Hi\");};$.fancybox.open();<\/script></body></html>';

    
$("#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();
        }
    });
});