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:

<script type="text/javascript">

    function dialogfunction(pageUrl) {

    var options = { url: pageUrl, width: 800, height: 600 };

    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);



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:

ORIGINAL – <a href="/sites/newsapp/Lists/News/DisplayNews.aspx?ID={@ID}" class="newsTitle">

NEW WITH DIALOG FUNCTION – <a href="#" onclick="javascript:dialogfunction('/sites/newsapp/Lists/News/DisplayNews.aspx?ID={@ID}'); return false;" class="newsTitle">

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:

/* hide ribbon in modal dialog window */

.ms-dialog #s4-ribbonrow {

display: none;


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


Email [email protected] with any questions you have pertaining to this course.

New CPE Accredited Courses Now Available for Dynamics AX, GP, and NAVEARN CREDITS TODAY