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

My Scenario :

I have an Operation Site and I want to open the Central Administration Link at its Home Page as a Modal Dialog.

Steps:

  • From Site Settings > Edit Page.

Edit Page

  • Click on Add web Part > From Media and Content > Add Script Editor or Content Editor if 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://SharePointSite/Lists/WebEvents/NewForm.aspx');">Central Admin</a>

SP.UI.ModalDialog.showModalDialog

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

ModalDialog.gif

Note : Modal Dialog can only be used to show internal Links within SharePoint, and If you tried to use external link like http://google.com you will get the following error.

ModalDialog error

Note : You should be aware of SP.UI.ModalDialog.showModalDialog 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

SP.UI.ModalDialog.showModalDialog is working only with WepPart Page Link.

Enjoy 🙂

Advertisements

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

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