Open a link via Modal Dialog in SharePoint

In this hint, I will show

  • How to open a SharePoint link via SharePoint Modal Dialog (SP.UI.ModalDialog.showModalDialog)?
  • How to redirect to another page when the SP.UI.ModalDialog closed?

Scenario:

In a SharePoint Modal Dialog, I want to open a Central Administration URL, Once I clicked on close button at Modal Dialog it should redirect to external page URL.

Open SharePoint link using SharePoint Modal Dialog

  • From Site Settings, > Click on Edit Page.

Edit Page in SharePoint

  • Click on Add Web Part > From Media and Content > Add Script Editor or Content Editor in case, you are using SharePoint 2010.

Add Script Editor Web Part In SharePoint

  • Edit Snippet.

Edit Snippet In Script Editor

  • Add the following code:
<script>
function openDialog(pageUrl) {
var options = {
url: pageUrl,
title: 'Title of the Dialog',
allowMaximize: false,
showClose: true,
width: 500,
height: 500
};
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}
</script>
<a href="#" onclick="openDialog('http://CentralAdminURL');">Central Admin</a>

Open a SharePoint link via SharePoint Modal Dialog

  • Click Ok > Stop Page Editing.
  • Click On the link that should be shown in a Modal Dialog.

Open a SharePoint link via SharePoint Modal Dialog

Note: Modal Dialog can be used to show internal/external Links but in some cases, some publisher of external links like ‘http://google.com&#8217; doesn’t allow to display this content in IFrame,

I tried to use an external link like ‘http://google.com&#8217; but unfortunately, I got the below error.

This Content cannot be displayed in a frame

ModalDialog error

You should be aware of SP.UI.ModalDialog.showModalDialog

  • is working with WepPart Page Link.
  • is not working with wiki page link, If you tried this you will get the following error:

Error: Sorry, something went wrong An unexpected error has occurred.

Error: Sorry, something went wrong An unexpected error has occurred.


Redirect to another page when the SharePoint Modal Dialog closed

The below code handles the close button by checking on the result of .dialogReturnValueCallback, In case, it was SP.UI.DialogResult.cancel that means the Modal dialog is closed.


<script>
function openDialog(pageUrl) {
var options = {
 url: pageUrl,
 title: 'My Title',
 allowMaximize: false,
 showClose: true,
 width: 400,
 height: 350,
 dialogReturnValueCallback: function(result){

 if (result == SP.UI.DialogResult.cancel) {
 //Add your action that you need when Modal dialog close: Redirect
 window.location.href=pageUrl;
 }
 }

 };
 SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options); }
</script>
<button type="button" Alt="M.Qassas" onclick="openDialog('https://blog.devoworx.net/');">M.Qassas</button>

Applies To
  • SharePoint Online.
  • SharePoint Server 2016.
  • SharePoint Server 2013.
  • SharePoint Server 2010.

 

Advertisements

4 thoughts on “Open a link via Modal Dialog in SharePoint

  1. This is THE ONLY modal window example, on the entire Internet, that works!!!!! I have tried countless examples, on countless other site, and not a single one actually worked. Thank you for this!!!!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s