SharePoint modal dialog

update 7/12/2011
I added an option to refresh the parent page after closing the modal dialog, called 'RefreshCallback'. It performs a silent refresh, if you want you can create another function to combine it with a notification callback.

A nice new feature in SharePoint is the modal dialog. It's the pop-up that you see everywhere - from list item forms to tags & notes.
modal window
You can use it for your own pop-ups. For example, say you want to open a site map page in a pop-up - you want people to click a link in the top navigation and a site map will open in this overlay window.
It's possible to achieve with a little JavaScript.

This subject is discussed lengthily here and here.

To keep things straight and simple I've assembled my own script (downloadable here.) It receives the basic parametres and opens a nice pop-up.
function openModal(url, title, width, height, callbackType) {
    var options = SP.UI.$create_DialogOptions();
    options.url = url;
    options.title = title;
    options.width = width;
    options.height = height;
    if (callbackType == 'NotificationCallback') {
        options.dialogReturnValueCallback = NotificationCallback;
    else if (callbackType == 'SilentCallback') {
        options.dialogReturnValueCallback = SilentCallback;
    else if (callbackType == 'RefreshCallback') {
         options.dialogReturnValueCallback = RefreshCallback;
function NotificationCallback(dialogResult, returnValue) {
    if (dialogResult == SP.UI.DialogResult.OK) {
        SP.UI.Notify.addNotification('Operation succeeded', false);
    else if (dialogResult == SP.UI.DialogResult.cancel) {
        SP.UI.Notify.addNotification('Operation cancelled', false);
    else if (dialogResult == SP.UI.DialogResult.invalid) {
        SP.UI.Notify.addNotification('Operation invalid', false);
function SilentCallback(dialogResult, returnValue) {
function RefreshCallback(dialogResult, returnValue) {
You can put this in a .js file and reference it from the master page. Then you can call the function from everywhere.

This is how you call the function:
javascript:openModal('/myPage.aspx','My Title', 700, 400, 'NotificationCallback');
And now for the explanation. The function gets these parametres:
  • url - the URL of the page to be opened
  • title - the title of the page. if left blank the default title will be displayed
  • width - the width of the pop-up in pixels
  • height - the height of the pop-up in pixels
  • callbackType - one of these options:
    • NotificationCallback - the results of the operation will be displayed in the status area
    • SilentCallback - no notification will be made
    • RefreshCallback - the parent page will be refreshed after closing the modal window, no notification will be made

Getting back to the example (opening a site map from the top navigation) - here are the steps:
  1. create a site map page (an empty page with a site map web part, there are many web parts to be downloaded - I like this one).
  2. go to the top navigation settings page and insert a new link called 'Site Map'. enter this URL for the link (feel free to change the parametres:)
    javascript:openModal('/siteMap.aspx','Site Map', 700, 400, 'NotificationCallback'); 
  3. if you have any problems accessing the top navigation settings page visit this link: Javascript in Quick Launch and Top Link Bar links

Print Friendly and PDF


SPUser said...

can you suggest a way to open a search result in a modal dialog when user clicks on any result entry on results page?

gemon01 said...

hi Ami, I have a problem with modal windows when a modal window opens remains white until it is fully loaded, you'd be able to tell me how to post a notification on the modal loading, or would you be able to tell me how to change title of modal window so that he wrote "loading" and once finished loading, you can display the correct title?

GC said...

Hoping you are still on line? We are wanting all PDFs to open in dialog. Is this possible with this script? It would be a HUGE help if so. Thank you for anytime you may have on this.

Post a Comment