how to open a pdf file in a popup window with jquery

Question

My code throws a JS error, offsetParent is not set -- cannot scroll. I tried position: relative; but it still shows the same error.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(document).ready(function() {
        $('#btnShow').click(function(){
            $("#dialog").dialog();
        }); 
    });                  
</script>

<a href="#" id="trigger">this link</a>
<div id="dialog" style="display: none; position: relative; height: 4em; overflow: scroll;">
    <div>
        <iframe src="reports/my_pdf.pdf"></iframe>
    </div>
</div>

Answer 1

Try to use "lazy loading":

<script type="text/javascript">
    $(document).ready(function() {
        $('#btnShow').click(function(){
            $("#dialog").dialog();
            $("#frame").attr("src", "reports/my_pdf.pdf");
        }); 
    });
</script>

<a href="#" id="btnShow">this link</a>
<div id="dialog" style="display: none;">
    <div>
        <iframe id="frame"></iframe>
    </div>
</div>

Answer 2

Rather than jquery you can simply do this by using Javascript

You can use window.open() method and insert the pdf file in it window.open("path/for/pdffile") and give width, height and its position

window.open("path/for/pdffile", "width=500,height=500,top=100,left=500")

You can insert the above code in a function and call it when a html element is clicked .

That's it your pdf file will be opened in a pop up window