Display web part page in a modal dialog box using JavaScript in SharePoint Online/2013/2016

This SharePoint JavaScript tutorial, we will discuss how to display web part page inside a dialog box using JavaScript in SharePoint Online or SharePoint 2013/2016.

Display web part page in a modal dialog box using JavaScript in SharePoint

Here we will use the JavaScript and SP.UI.ModalDialog to display a web part page in the modal dialog box in SharePoint.

Remember the page should be a web part page, it will not work for wiki pages in SharePoint.

We can use the code inside a script editor web part or inside a content editor web part in a web part page in SharePoint.

<script type="text/javascript">
function OpenDialog(dialogUrl, dialogTitle) {
var options = {
url: dialogUrl,
title: dialogTitle
};
SP.UI.ModalDialog.showModalDialog(options);
}
</script>

<a href="#" onclick="OpenDialog('https://tsinfo.sharepoint.com/sites/TSInfoClassic/SitePages/Test.aspx','My Dialog Box');">Show Modal Dialog</a>

Now when you click on the above link then Test web part page will open as a dialog box. It will appear like below:

Display web part page in a modal dialog box using JavaScript in SharePoint

You may like following JavaScript tutorials:

This SharePoint tutorial, we discussed how to display web part page in a modal dialog box using JavaScript in SharePoint Online or SharePoint 2013/2016.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SPGuides.com

>