How to Display Modal Pop-ups in SharePoint

In this tutorial, we’ll explore how to create modal pop-ups using client-side code in SharePoint. This technique works for both SharePoint Online and SharePoint on-premises versions. We’ll use a script editor web part to insert the client-side code into a SharePoint web part page.

Table of Contents

Method 1: Display Modal Pop-up on Page Load

Here’s the code to open a dialog box when the SharePoint web part page loads. To make it work, you can add a script editor web part and add the below code.

<script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', showModalPopUp);
});

function showModalPopUp() {
    var options = {
        url: 'YOUR-SITE-URL/Lists/Employees/AllItems.aspx',
        title: 'Employees',
        allowMaximize: false,
        showClose: true,
        width: 500,
        height: 350
    };
    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
    return false;
}
</script>

Check out SharePoint JSLink Examples

Method 2: Display a Modal Pop-up on Button Click

This code will display the modal popup when a button is clicked on the SharePoint web part page.

<script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $("#btnShowPopup").click(function(){
        showModalPopUp();
    });
});

function showModalPopUp() {
    var options = {
        url: 'YOUR-SITE-URL/Lists/Employees/AllItems.aspx',
        title: 'Employees',
        allowMaximize: false,
        showClose: true,
        width: 500,
        height: 350
    };
    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
    return false;
}
</script>
<input type="button" id="btnShowPopup" value="Show Modal Pop-up"/>

Check out SharePoint .NET Client Object Model Examples

Opening a SharePoint List Form in a Dialog Box

To open a SharePoint list form in a dialog box on button click:

<input id="btnClick" onclick="javascript:OpenPopUpPage('YOUR-SITE-URL/Lists/TestList/NewForm.aspx');" type="button" value="Open New Form"/>

Read SPServices in SharePoint

Advanced Modal Dialog Implementation in SharePoint

For more complex scenarios, here’s a comprehensive implementation:

Code for Parent Page

// Function to open the SharePoint Dialog
function OpenStartDateDialog(pageUrl, popupTitle, width, height) {
    var options = {
        title: popupTitle,
        url: pageUrl,
        width: width,
        height: height,
        dialogReturnValueCallback: DialogClosedWithData
    };
    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}

// Function that handles dialog closure
function DialogClosedWithData(buttonValue, passedValues) {
    if (buttonValue == SP.UI.DialogResult.OK) {
        // If OK button is clicked
        SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.Status.removeAllStatus', true);
        var value1 = passedValues[0];
        var value2 = passedValues[1];
        var value3 = passedValues[2];
    } else if (buttonValue == SP.UI.DialogResult.cancel) {
        // If cancel button is clicked
        SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.Status.removeAllStatus', true);
    }
}

Check out Redirect SharePoint Site To New URL

Code for Dialog Page

// Function to close the dialog and pass values to the parent page
function CloseDialogWithDataPassed(value1, value2, value3) {
    var values = [];
    values[0] = value1;
    values[1] = value2;
    values[2] = value3;
    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.commonModalDialogClose', 1, values); // 1 for OK button click
}

// Function to close the dialog without passing data
function CloseDialogWithoutData() {
    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.commonModalDialogClose', 0, ''); // 0 for cancel button click
}

Refreshing the Parent Page After Closing the Dialog

If you want to refresh the parent page after closing the dialog, then you can write the code below.

function OpenStartDateDialog(pageUrl, popupTitle, width, height) {
    var options = {
        title: popupTitle,
        url: pageUrl + "?IsDlg=1", // Adding IsDlg=1 parameter
        width: width,
        height: height,
        dialogReturnValueCallback: DialogClosedWithData
    };
    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}

function DialogClosedWithData(buttonValue, passedValues) {
    if (buttonValue == SP.UI.DialogResult.OK) {
        SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.Status.removeAllStatus', true);
        location.href = location.href; // Refresh the page
    }
}

Check out How to Include jQuery in SharePoint

Troubleshooting: SP.UI.ModalDialog.showModalDialog Not Working

If you’re migrating from an older version of SharePoint and experiencing issues with SP.UI.ModalDialog.showModalDialog(), follow these steps to fix it:

Remove direct JavaScript references to sp.js and SP.UI.Dialog.js
Add ?IsDlg=1 to the URL parameter
Replace SP.UI.ModalDialog.showModalDialog() with SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options)

Example of fixed code:

function ShowServerInformation() {
    var options = {
        url: '/_layouts/Management/GeneralInformation.aspx?IsDlg=1',
        title: 'Management Information',
        allowMaximize: false,
        showClose: true,
        width: 430,
        height: 230
    }
    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
    return false;
}

By using the Script on Demand (SOD) model introduced in newer SharePoint versions, you ensure that all necessary JavaScript files are loaded before the function is executed.

These techniques can be used to create modal pop-ups in SharePoint that display content from pages, lists, or custom HTML.

DOWNLOAD USER REGISTRATION POWER APPS CANVAS APP

FREE Power Platform Tutorial PDF