How to show a pop-up in SharePoint

This post was most recently updated on May 15th, 2019.

Reading Time: 5 minutes.

This ages old trick deserves to be published – since it makes it easy to quickly show info from pretty much any another page on pretty much any Classic SharePoint page (in a SharePoint-compatible pop-up). So, here goes:

Using SharePoint’s JavaScript library to open an arbitrary pop-up

Yes – SharePoint contains all the functionality out-of-the-box, and you almost don’t have to do anything yourself! Let’s see how this works.

Okay – long story short. On all Classic SharePoint pages, you can call this function: SP.UI.ModalDialog.ShowPopupDialog(). Like it says, it quite simply just opens a pop-up dialog, showing the page that it finds from the URL.

See below for a simple example:

<!-- Opens a pop-up -->
<a onclick="javascript:SP.UI.ModalDialog.ShowPopupDialog('https://yourtenant.sharepoint.com/sites/intranet/Pages/default.aspx')">Show more!</a>

What’s cool about this, is that you can show pretty much any page (that allows it) in this pop-up! For an example, see below.

Showing a page from my blog in a pop-up on a Classic SharePoint site
 Showing a page from my website/blog in a pop-up on a Classic SharePoint site… It looks fairly good, and it’s EASY!

This works in SharePoint Online, SharePoint 2010, SharePoint 2013, SharePoint 2016, even SharePoint 2019… As long as you’re using Classic SharePoint, you should be good! The best part is that it’s ridiculously easy.

How to show SharePoint pages in pop-ups?

But let’s imagine a different use case – showing another SharePoint page in a pop-up. You can use the same function for that!

This is very useful for showing other SharePoint pages in the context of whatever page the user is currently browsing. For example, this could look something like this:

Out-of-the-box SharePoint site in a pop-up might scale erratically
 Out-of-the-box SharePoint site in a pop-up might scale erratically

As you can probably imagine, showing just “any” page in SharePoint in a pop-up might also cause weird layout issues. This is especially true with out-of-the-box SharePoint sites, that are not responsive – they won’t always play nice in a pop-up! Luckily, the code for showing that pop-up appends the ?IsDlg=1 to the URL of the page, to hide the chrome of the page. That makes the page act a lot nicer.

If this doesn’t work for whatever reasons, you should modify the URL you’re passing to the method to include “IsDlg=1” as a parameter. See this post for more details:

The following script example shows how to use this:

<!-- Opens a pop-->
<a onclick="javascript:SP.UI.ModalDialog.ShowPopupDialog('https://yourtenant.sharepoint.com/sites/intranet/Pages/default.aspx?IsDlg=1')">Show more!</a>

Showing responsive SharePoint pages in pop-ups

However, if you’re using responsive styles in your SharePoint site, it might work reasonably well (even though the pop-up is going to be pretty crammed). Below, there’s a decent example of that:

The example is from a development environment, with responsive layout - so the pop-up contents actually scale fairly well!
The example is from a development environment, with responsive layout – so the pop-up contents actually scale fairly well!

One thing to note, however, is that you customize the size of the pop-up to offer more space for the contents. To achieve this, you’ll have to change the method call you’re using, though!

Next, let’s take a look into how to do that…

How to customize the pop-up in SharePoint?

You can actually tweak how the pop-up works in quite a few different ways. If you call .showModalDialog() instead of .ShowPopupDialog() (it’s interesting that Microsoft decided to deviate from camelCase there!), you can replace the “url” property (basically just the URL as a string) in the method call with an object containing any of the following properties. Only the “url” or “html” property is required, everything else is optional.

Below, I’ve gathered the different configuration values you can pass on to the function. You’ll need to add them as additional properties for the “options” object – let’s see how that works!

Documentation of .showModalDialog()’s options:

“options” object’s propertiesDescription
titleA string that contains the title of the dialog.
urlA string that contains the URL of the page that appears in the dialog. If both url and html are specified, url takes precedence. Either url or html must be specified.
htmlA string that contains the HTML of the page that appears in the dialog. If both html and url are specified, url takes precedence. Either url or html must be specified.
xAn integer value that specifies the x-offset of the dialog. This value works like the CSS left value.
yAn integer value that specifies the y-offset of the dialog. This value works like the CSS top value.
widthAn integer value that specifies the width of the dialog. If width is not specified, the width of the dialog is autosized by default. If autosize is false, the width of the dialog is set to 768 pixels.
heightAn integer value that specifies the height of the dialog. If height is not specified, the height of the dialog is autosized by default. If autosize is false, the dialog height is set to 576 pixels.
allowMaximizeA Boolean value that specifies whether the dialog can be maximized. true if the Maximize button is shown; otherwise, false.
showMaximizedA Boolean value that specifies whether the dialog opens in a maximized state.
  1. true the dialog opens maximized.
  2. Otherwise, the dialog is opened at the requested sized if specified; or
  3. the default size, if specified; or
  4. the autosized size.
showCloseA Boolean value that specifies whether the Close button appears on the dialog.
autoSizeA Boolean value that specifies whether the dialog platform handles dialog sizing.
dialogReturnValueCallbackA function pointer that specifies the return callback function. The function takes two parameters, a dialogResult of type SP.UI.DialogResult Enumeration and a returnValue of type object that contains any data returned by the dialog.
argsAn object that contains data that are passed to the dialog.

Okay – how to use this new knowledge in practice? See below for an example!

Example of a SharePoint pop-up with custom options

If you decide to open the pop-up with options, your code might look something like this:

var options = SP.UI.$create_DialogOptions();
 
options.title = "A standard SharePoint Publishing site in a dialog will look funky.";
options.width = 400;
options.height = 600;
options.url = "https://yourtenant.sharepoint.com/sites/publishing";
 
SP.UI.ModalDialog.showModalDialog(options);

Simple and straightforward!

Links and References

See these 2 MSDN articles for more info:

Antti K. Koskela

Antti Koskela is a proud digital native nomadic millenial full stack developer (is that enough funny buzzwords? That's definitely enough funny buzzwords!), who works as a Solutions Architect for Valo Intranet, the product that will make you fall in love with your intranet. Working with the global partner network, he's responsible for the success of Valo deployments happening all around the world.

He's been a developer from 2004 (starting with PHP and Java), and he's been bending and twisting SharePoint into different shapes since MOSS. Nowadays he's not only working on SharePoint, but also on .NET projects, Azure, Office 365 and a lot of other stuff.

This is his personal professional (e.g. professional, but definitely personal) blog.

2
Leave a Reply

avatar
5000
1 Comment threads
1 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
Antti K. KoskelaCraig Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Craig
Guest
Craig

Any idea how we could accomplish the same in a modern site?