SharePoint: Opening a 2010 Dialog Box from Quick Launch

 

Here’s how to open any page in a SharePoint 2010 popup dialog box from Quick Launch or anywhere else using JavaScript. The key code is from an MSDN article here, but it needed just a little tweaking to work from Quick Launch or an “<A>” tag’s HREF.

 

As a teaser… here’s this site displayed in a SharePoint 2010 dialog box:

 

The Code

The MSDN article had this JavaScript example:

var options = SP.UI.$create_DialogOptions();
options.url = url;
options.height = 300;
SP.UI.ModalDialog.showModalDialog(options);

I just needed to modify it so it would work in an HREF of an <A> hyperlink tag. Basically it needed to be in one line and return VOID when called. The following must be typed as all one line!

JavaScript:var options=SP.UI.$create_DialogOptions();
options.url='http://techtrainingnotes.blogspot.com';
options.height = 400;
void(SP.UI.ModalDialog.showModalDialog(options))

 

Now to use it in Quick Launch:

Just go to Site Actions, Site Settings and click Quick Launch. Then click New Navigation Link and add the JavaScript:

 

What kind of pages make sense for a dialog box?

It probably does not make much sense to use dialog boxes to display external sites like this one, although it’s better than a Page Viewer Web Part. A better use would be to display any SharePoint page or list/library view and an external report that fits in a popup window.

If you want to display a SharePoint page inside of a dialog box add “?IsDlg=1” to the page’s URL.

Here’s the a normal Shared Documents library page:

 

Here’s the same page with “?IsDlg=1” added to the URL:

           http://yourserver/sites/yoursite/Shared%20Documents/Forms/AllItems.aspx?IsDlg=1

 

So here’s Shared Documents in a dialog box… notice that you have the ribbon, but not the rest of the master page clutter!

 

And as a additional bonus, dialog boxes can be called from within dialog boxes. Here’s the Upload Multiple dialog box being used from the example above:

 

Or open a dialog box from a HyperLink

To use in an <A> hyperlink tag:  (again, this is all one line!)

<a
href="JavaScript:var options=SP.UI.$create_DialogOptions();
options.url='http://techtrainingnotes.blogspot.com';
options.height = 400;
void(SP.UI.ModalDialog.showModalDialog(options))"
>
Click here!
</a>

 

Links:

How to: Display a Page as a Modal Dialog Box

http://msdn.microsoft.com/en-us/library/ff798390.aspx

 

How to use JavaScript in Quick Launch

http://techtrainingnotes.blogspot.com/2010/10/sharepoint-javascript-in-quick-launch.html

 

More about the SharePoint JavaScript API

http://msdn.microsoft.com/en-us/library/ee538253.aspx

 

.