Displaying modal content on websites has improved greatly with the usage of lightbox style modal popups. Most users are familiar with showing images in a lightbox, but showing other types of content is a nice benefit. Using jQuery and FancyBox allows for several types of content to be shown: Images, Text, Frames, etc. One content type that has been problematic for many developers is PDF documents. It would be very nice to show the PDF within the lightbox style popup, but non-HTML content can be an issue in modals.
A simple work-around is to create a handler page (called PressDetailsFile.aspx in this sample) that will display the PDF document within an iFrame and then load that page with FancyBox. You will want to set the frame size to the same size as your Fancybox less about 5 pixels. This will keep scroll bars from showing on the modal. The PDF document will scroll within Acrobat.
<iframe src="Docs/PDF-Document.pdf" width="695" height="595"></iframe>
The jQuery usage is shown below:
$(document).ready(function() {
$(".fancyFrame").fancybox({'frameWidth' : 700, 'frameHeight': 600, 'overlayShow': true, 'hideOnContentClick': false});
});
<a class="fancyFrame" Title="Item Title" href="PressDetailsFile.aspx?File=PDF-Document.pdf">Link to Document</a>
This sample can easily be expanded and used within a dynamic listing of documents.
