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:

Chuck Bevitt said...

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.

Anonymous said...

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>

Site Meter