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.

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

• Edit Snippet.

• 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>

• Click Ok > Stop Page Editing.
• Click On the link that should be shown in a 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’ doesn’t allow to display this content in IFrame,

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

This Content cannot be displayed in a frame

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.

---

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.