How To Open SharePoint Application Page In Modal Dialog (Popup) Using JavaScript

Sometimes, there is a requirement to open a SharePoint Application page as a popup with the new Modal Dialog Framework, which allows you to interact with the users in an unobtrusive way using just a few lines of JavaScript.

In real time projects, the requirements are you need to open internal or external pages inside an OOTB modal dialog of SharePoint 2013, as New Task Form, Custom Application page, or Upload File Form, and maybe you want to open the external pages and sites.

Basic syntax for SP Modal dialog box

var value = SP.UI.ModalDialog.showModalDialog(options);

 

The options to create the modal dialog.

Example 

SP.UI.ModalDialog.showModalDialog(options);
var options = {
    title: " Title",
    width: 400,
    height: 600,
    url: "/_layouts/newform.aspx"
};
SP.UI.ModalDialog.showModalDialog(options);

Explain

Options Property	Description
title	The title of the Modal dialog.
url	Page URL or HTML
html	A string that contains the HTML of the page that appears in the dialog.
width	Modal dialog page width. If the width is not specified it will take autosize as true.
height	Modal dialog page width. If the width is not specified it will take autosize as true.
allowMaximize	A Boolean value that specifies whether the dialog can be maximized or not. It is true if the Maximize button is shown; else false.
showClose	The Close button appears on the dialog and it’s a Boolean value
autoSize	Dialog size (true/false).
dialogReturnValueCallback	A function pointer that specifies the return callback function.
args	An object that contains the data, that is passed to the dialog.

Example 1 

var options = {
    url: ‘https: //gowtham.sharepoint.com/teams/lists/gvr/newform.aspx’,
        title: ‘ModalDialog’,
    allowMaximize: false,
    showClose: true,
    width: 800,
    height: 330,
    dialogReturnValueCallback: Function.createDelegate(null, function(result, returnValue) {
        if (result == SP.UI.DialogResult.OK) {
            if (returnValue == null) {
                SP.UI.Notify.addNotification('Operation successful');
                SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
            } else {
                location.href = returnValue;
            }
        }
    })
};
SP.UI.ModalDialog.showModalDialog(options);

Example 2

Sometimes, JS files do not load properly, so we have to load the files, as shown below.

function openModelDialogPopup(strPageURL) {
    var dialogOptions = {
        url: ‘https: //gowtham.sharepoint.com/teams/lists/gvr/newform.aspx’,
            title: ‘ModalDialog’,
        allowMaximize: false,
        showClose: true,
        width: 800,
        height: 330
    };
    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', dialogOptions);
    return false;
}

Example 3

Sometimes, when we close the Modal popup, we need to refresh the parent page, so try this code to refresh the parent page. 

SP.UI.ModalDialog.showModalDialog({
            url: dialogUrl,
            allowMaximize: dialogAllowMaximize,
            showClose: dialogShowClose,
            width: dialogWidth,
            height: dialogHeight,
            title: dialogTitle,
            dialogReturnValueCallback: RefreshOnDialogClose //this value will refresh the Parent page.
        }

Example 4

Sometimes, when we close the Modal popup, we need to refresh the parent page, so try this code to refresh the parent page. 

var options = {
    url: dialogUrl,
    allowMaximize: dialogAllowMaximize,
    showClose: dialogShowClose,
    width: dialogWidth,
    height: dialogHeight,
    title: dialogTitle,
    dialogReturnValueCallback: function(dialogResult) {
        if (dialogResult != SP.UI.DialogResult.cancel) {
            //When you click OK this will happen
            SP.UI.ModalDialog.RefreshPage(dialogResult)
        }
    }
}

I hope, you enjoyed the blog.