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 is 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.

How to open a SharePoint link via SharePoint Modal Dialog?

  • From Site Settings, > Click on Edit Page.

Edit Page

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

Script Editor

  • Edit Snippet.

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>

SP.UI.ModalDialog.showModalDialog

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

ModalDialog.gif

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 a Frame, I tried to use an external link like ‘http://google.com&#8217; but unfortunately, you will get the following error.

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

Note: 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.

Wiki page with Modal Dialog.gif

How to redirect to another page when the SP.UI.ModalDialog is closed?

In the below code, you can handle close button by checking on the result of dialogReturnValueCallback, In case it’s SP.UI.DialogResult.cancelthat mean 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>

Enjoy 🙂

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s