Display a PDF in modal window

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 like to keep my images, css, javascripts and jquery files under the style library directory.

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
guessing.

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:

<script type=’text/javascript’ src=’/Style%20Library/services-plugin/js/jquery.simplemodal.js’></script>

<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:

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: