By using a few jquery scripts, it is possible to set a SharePoint web page that displays .pdf files inside a modal window.
To accomplish this several files need to be uploaded to the web server. In my example,
I started by creating a directory called ‘services-plugin’ and inside that directory, I created
other directory based on file type which included directories for css, images, js etc.
A developer should try to keep files organized in way that are easy to located so there is no second
To begin developing a Sharepoint page with jquery scripts, I started by creating a new
web part page and added a Content Editor web part to the page. Inside the properties of
the CEWP, I linked to an html file that I stored under the Style library. Designer will also
keep track of versioning control for these files so if you need to restore an older copy, you can do so.
The Modal Window
SharePoint has a client side integration with the Modal window using SP.UI.ModalDialog and you
can learn more about that at this link. The scope of this article is to explain how to use jquery modal
window which looks nicer and allows for easier customization using CSS.
There are several modal jquery scripts on the Internet. The one I worked with is called jquery.simplemodal.js which can be downloaded
at Eric Martin’s website. He has a great site where you can download and view demos of the modal window in action.
Inside the head tag of the htm file, simply add the script link:
<link type=’text/css’ href=’/Style%20Library/services-plugin/css/basic.css’ rel=’stylesheet’ media=’screen’ >
Styling the window is done thru css including the modal overlay, container and close button.
Simple Modal handles all the settings necessary for the dialog to display dynamically in the center of the screen.
Download SimpleModal files from this link.
PDF In the Modal Window
The second jquery script I used is called PDFObject which works great in SharePoint 2010. You can check out the
website http://www.pdfobject.com to download and learn how to easily integrate to your page.
Follow the code below: