SharePoint 2010 Pop-Up Dialogs
SharePoint 2010 makes it incredibly easy to add dialog content to your website. Built-in functionality allows you to retrieve content from anywhere within your site and display it in a modal dialog that appears over the page. This is pretty standard stuff when it comes to modern web technology, but the ease of use is what makes SharePoint dialogs so amazing. In this article, we’ll explore the dialog functionality that comes with the SharePoint 2010 platform, and we’ll discover new ways to customize that content to create a uniquely fresh appearance for your SharePoint portal.
Dialogs in SharePoint 2010
Even if you have chosen not to acknowledge dialogs in SharePoint 2010 just yet, they’re already being used throughout the SharePoint platform for things like pages, lists, and libraries. Every time you create a new page, for instance, you’ll see a dialog that appears on the page. It most likely looks something like this:
You’ll see similar dialogs when you create and edit list items, as well as within any document libraries that you have created throughout your site collection. These pop-up forms and views are an integral part of the SharePoint 2010 platform.
How it Works
iframe to request content from elsewhere on your site. This content can be anything inside SharePoint, even publishing pages or custom application pages that you’ve created yourself.
If you’ve ever created your own master page in SharePoint 2010, you may have been confused when you were prompted with two options when trying to apply your new master page to the site. SharePoint 2010 segregates your master page delegation between site master page and system master page. Basically, your site master page will be applied to pages, lists, and libraries, where the system master page is applied to everything else (settings, permissions, administration, and…dialogs). When you call a pop-up dialog in SharePoint, the content is requested and is displayed using system master page. If you want to start customizing the way your dialogs appear in SharePoint 2010, the first step is to format your custom master page to also work as a system master page.
System Master Pages
The most important thing you’ll want to do in order to optimize your master page for dialog use is to designate which elements of the page will be hidden inside a dialog view. If you open Microsoft’s v4.master file, you may notice that
class="s4-notdlg" appears in numerous places throughout the file. The s4-notdlg class name should be applied to anything you want to hide in the dialog view. This means headers, footers, navigation, sidebars, etc. Basically, you’ll want to add this CSS class to everything except for the main content area of your design. When dialogs are displayed, anything with the s4-notdlg CSS class is automatically trimmed out.
Dealing with Style
Your design most likely has a fixed width, or at the very least, a minimum width at which it can display. Dialogs are very small in size, so the width and size formatting that you’ve established for your design won’t necessarily work nicely within the dialog view. Fortunately, any time your master page is used to display dialog content, the
html element gets a special CSS class name called ms-dialog. You can use this to override any styles that you’ve set for your design, making it appear correctly both in normal and in dialog views. For example, you might have a
div element in your design with an ID of
wrapper. In an attached CSS file, you can style this element as it appears both in normal and dialog views:
In the above example, the
wrapper element will switch to fluid width when displayed inside a SharePoint 2010 dialog. You may have to utilize this technique with things like columns, background colors, and other design elements as they appear inside the dialog.
Harness the Power
Now that your master page is optimized for dialog use, it’s time to start pulling some content from your SharePoint site. Creating a pop-up link is extremely easy. On any page or within a content editor web part, create a link to request a dialog page:
You can use the OpenPopUpPage function to view any content in dialog mode. There is also a more flexible function called OpenWebPage that allows you to specify things like dialog width and height. Using these function in conjunction with a custom system master page, the limits to what you can display within a dialog in SharePoint are really limitless.
This is easy enough to do in SharePoint 2010, simply because our custom master page is formatted to display content in both normal and dialog views already. We can easily direct users to the normal view of the content, and override that functionality for script-enabled users of our site.
In true progressive enhancement fashion, I have created a simple jQuery function that will turn any normal link in your SharePoint site into a pop-up dialog link, simply by associating a CSS class with that anchor tag. Add this functionality to your own SharePoint 2010 site:
- Ensure that the jQuery script library is attached to the master page or page layout on which you will utilize my script
- Add a unique CSS class name to the links you wish to display in dialog view:
The last thing you’ll want to consider when using SharePoint dialogs is the style of the dialogs, themselves. The dialog HTML gives you numerous CSS classes that allow you to completely customize the appearance of the dialog window, and even the appearance of the shaded area behind the dialog. The following image shows the HTML of the SharePoint dialog, and I’ve also highlighted some important CSS classes you’ll use to change the appearance of the windows.
Using these classes, you can create a unique appearance of the dialogs in short order. Here is an example of a “dark” theme dialog:
After adding the CSS to an attached CSS style sheet, we get a completely custom dialog appearance, along with custom content that appears within the dialog box, itself.
There’s a lot of elements coming together in SharePoint 2010 dialogs, and it can take some practice and determination to get all the pieces fitting together quite right. If you can do it once, you’ll find that these custom dialogs are a simple, fast, and amazing tool to add to any SharePoint 2010 design.