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:
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.
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.
This works in SharePoint Online, SharePoint 2010, SharePoint 2013, SharePoint 2016… As long as you’re using Classic SharePoint, you should be good!
Showing SharePoint pages in such pop-ups
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:
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: How to show a Classic SharePoint page in dialog mode.
What does it look like to show a page in a pop-up?
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):
Making it fancier
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.
“options” object’s properties
A string that contains the title of the dialog.
A 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.
A 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.
An integer value that specifies the x-offset of the dialog. This value works like the CSS left value.
An integer value that specifies the y-offset of the dialog. This value works like the CSS top value.
An 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.
An 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.
A Boolean value that specifies whether the dialog can be maximized. true if the Maximize button is shown; otherwise, false.
A Boolean value that specifies whether the dialog opens in a maximized state.
A Boolean value that specifies whether the Close button appears on the dialog.
A Boolean value that specifies whether the dialog platform handles dialog sizing.
A 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.
An object that contains data that are passed to the dialog.
Changing the pop-up 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:
Latest posts by Antti K. Koskela (see all)
- Fastest way to verify your Client Id and Client Secret are valid with PowerShell - August 9, 2018
- How to get the user count for Azure AD Enterprise Application - August 1, 2018
- Solving “Tenant app deployment is only supported in the app catalog site. The current site is not the app catalog site.” error - July 31, 2018
- Solving “Sorry, your files couldn’t be uploaded. The upload might be too large or the server might be experiencing high network traffic.” in SharePoint - July 24, 2018