Sunday, June 8, 2008

pdf in modal dialog box

Few days back i was looking at tech forum in my organisation and i saw one query "how to open pdf in modal dialog box?". Initially i thought this is silly question but no question is silly :).
I tried to open pdf in modal dialog box but i couldn't succeed. I could open html or aspx page in modal dialog box but not pdf. This made me to reach conclusion that pdf doesn't like modal dialog box.
There is a work around of the above problem using which we can open pdf in modal dialog box.
Create a html page(try.html) and embed pdf in iframe like the below code.

< iframe id="iframetest" src="http://localhost:1446/openPdf/csharp_ebook.pdf" height="100%" width="100%"> Test Iframe </iframe>

open the html page using javascript
function popWin(){
window.showModalDialog("http://localhost/openPdf/try.html",'','dialogHeight:650px;dialogWidth:1000px')
}
This will open the pdf in modal dialog box.

Happy Coding :)

2 comments:

  1. This solution worked for me except for some reason the height attribute of the iframe tag wouldn't work when set to a percent value, so I had to use pixels instead. Using the example, rather than height="100%" in the iframe tag, I had to use height="650px". Width="100%" was OK.

    Must be a weird bug in IE.

    ReplyDelete
  2. Chuck: Yes, that is a bug in IE. To get the results you want, you'll need to add the style to both the body and HTML element of the page containing the iFrame.

    <style type="text/css">
    html, body, iframe
    {
    height:100%;
    width:100%;
    margin:0px;
    padding:0px;
    overflow:hidden;
    }
    </style>

    ReplyDelete