Mastering SharePoint Modal Dialogs

For those of you who have watched my screencasts on how to build a news application for SharePoint 2013 using XSL, I have a nice little add-on script that will help to improve the application’s user experience by adding a SharePoint modal dialog. As you may have observed, clicking on any of the news article links opens up a standard SharePoint list item page that allows a user to read the item. We customized this list item page by creating a new display form and altering some of the HTML so as to change the layout and content display.

Although this custom display form might be adequate for many purposes, we can improve the user experience by leveraging one of SharePoint’s UI functions found in the SharePoint Client Object Model to make news reading a little more engaging. By adding a bit of JavaScript to the page and making a few changes to our news.xsl, we can cause the news article page to launch in a nifty little modal window (also known as a  lightbox) which have become somewhat ubiquitous on the web. The use of modal windows in SharePoint 2013 is quite common for many functions. Modal windows were first introduced to SharePoint in version 2010.

When using the modal function, clicking on the link will launch a trimmed window and dim the background page with a semi-transparent overlay. This is much more attractive and friendly to the user than having to wait for a new page to load and render, and then hitting the back button in order to return to the original page. How do you do it?

Adding the SharePoint Modal Dialog with JavaScript

It’s actually quite easy. You’ll need to start by adding the following JavaScript to the page:

This defines the function that will cause the page to which you are linking to open in a modal window. You can adjust the width and height of the window in the options variable, which are here set to 800 x 600 pixels. The easiest way to add the JavaScript to the page is by creating a new file in Notepad or other text editor, pasting the above code into it, and saving and then uploading to a library of your choosing. Add a Content Editor web part, open the web parts properties’ panel,  and link to the file in its Content Link field.

Add the Modal Window call to the XSL

Next, open the news.xsl file in you XSL library and change all links to the news article. Do this by setting the anchors’ href attribute to “#” and adding an “onclick” attribute that calls the “dialogfunction” defined in the JavaScript file you created earlier. Use the URL you wish to open as the dialogfunction’s argument. Compare the anchor tags below:

Now, clicking on a link in the news web part will cause the news article to open in a modal window.

Hide the SharePoint Ribbon

You’ll probably want to remove the SharePoint ribbon from the window for a cleaner look, so just add the following style definition to the alternate.css file in the Style Library:

And there you have it, a substantial enhancement of the user experience with just a few lines of code. Happy coding!

  • Abha Pandey

    It didn’t work for me. I have multiple modal boxes (different URLs) on the same page. They are connected one after the other. Clicking some button on one box will take you to other. I want all the coding to be on the buttons only. Users are getting confused seeing the save button on the ribbon, thus, I need to hide it.
    Please guide me.
    (CSS is inline)

  • Bpackard

    I’m trying to get this working in Sp Foundations 2013.
    I would like to open a local SP page in a dialog box. Would this be possible with this method?

  • alanshieldsjr

    Very nice app! Thanks for the share! Can you help me to find where I can download or use the XSL code for this app? I have reviewed the videos, but I cannot find the XSL code to begin to use this.

  • Logan2847

    This is one of the few online articles/tutorials (and the previous screencast) that I could actually get to work as advertised. Thank you Alvin for the well articulated information. Now only if I can get modal dialogues to work with other webparts!