Display modal pop up in SharePoint Online/2013/2016

In this SharePoint tutorial, we will discuss how to show modal popup using the client-side code in SharePoint Online. The same code we can use to show a dialog box in SharePoint 2016/2013.

Display modal pop up in SharePoint

Here we will use a script editor web part to insert the client-side code into a SharePoint web part page.

Below is the code which will open the dialog box when the SharePoint web part page loads.

Edit the SharePoint web part page where you want to add the code and then add a script editor web part or content editor web part.

<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: ‘https://onlysharepoint2013.sharepoint.com/sites/Bhawana/Lists/Employees/AllItems.aspx’,
title: ‘Employees’, //Set the title for the pop up
allowMaximize: false,
showClose: true,
width: 500,
height: 350
};
SP.SOD.execute(‘sp.ui.dialog.js’, ‘SP.UI.ModalDialog.showModalDialog’, options);
return false;
}
</script>

Below is the code which will display the modal popup on button click.

<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: ‘https://onlysharepoint2013.sharepoint.com/sites/Bhawana/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 up"/>

Once you save the code and click on the button the dialog will open on the SharePoint page.

Open SharePoint 2013 list form in a dialog box on button click

Let us see, how to open a SharePoint 2013 list form in a dialog box on a button click using JavaScript in SharePoint 2013. This we can achieve using a simple JavaScript script.

So for this, first of all, I have created a web part page.

Here you can use a script editor or content editor web part to insert the javascript code into the page. The content editor web part is fine when you want to insert HTML code but if I have HTML or script, I always prefer to use in the script editor web part.

If you will add JavaScript to your page using the Content Editor Web Part in SharePoint 2013 then the script tag entries will be removed. So I always prefer to use the script editor web part.

To add a script editor web part to the page, edit the page then click on the “Add a Web Part” link, and then from the web part categories, select “Media and Content” and then choose Script Editor, then click on Add. Once the web part added, then you can see EDIT SNIPPET and put the below code which looks like the below:

<input id="btnClick" onclick="javascript:OpenPopUpPage('https://onlysharepoint2013.sharepoint.com/Lists/TestList/NewForm.aspx');" type="button" value="Ope New Form"/>

Now Save the page, When you click on the button, the new form will open in a dialog box.

This is how to open SharePoint 2013 list form in a dialog box on a button click using JavaScript.

SharePoint Modal Dialog Box Examples

Let us see a few examples of SharePoint modal dialog box.

Open SharePoint Dialog and pass value from SharePoint dialog to parent page:

The below code is to be placed on the page on which you are going to open the SharePoint dialog. It means the parent page is going to contain the below code.

//The below function will open the SharePoint Dialog for you
//Call the function on the button click or any other event you want with teh required parameters
//pageUrl : The page url that you going to show in the dialog
//popupTitle : Title of the dialog
//width : width of the popup(an integer value)
//height : height of the popup(an integer value)

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);
}

//Below function gets called when the SharePoint dialog box is closed, as we have mentioned it in the previous function
//buttonValue – This parameter contains the value to identify whether OK/Cancel button clicked(can be 1 for OK and 0 for Cancel)
//passedValues – The values passed from the parent function, here I have passed in an array

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 (result == SP.UI.DialogResult.cancel) {//If cancel button is clicked
SP.SOD.execute(‘sp.ui.dialog.js’, ‘SP.UI.Status.removeAllStatus’, true);
}
}

Close SharePoint dialog from server side button click (button in the dialog)

Keep the below code in the page, which you are going to show in the SharePoint dialog box.

//The below function closes the dialog and passes the values to the parent page
//value1,value2,value3 – Values that I want to pass from the dialog 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
}

//Below function closes the dialog without any data passed to parent page

function CloseDialogWithoutData() {
SP.SOD.execute(‘sp.ui.dialog.js’, ‘SP.UI.ModalDialog.commonModalDialogClose’, 0, ”);//0 for cancel button click
}

In the above code block, we have 2 functions the first function closes the dialog with data passed to parent page, however the second function simply closes the dialog, without passing any parameter.

Now the above function can be called from an ASP.NET button click event like below:

protected void btnClose_OnClick(object sender, EventArgs e)
{
try
{
string name = txtName.Text;
string age = ddlAge.SelectedItem.text;
string dob = dtDob.SelectedDate.ToString();
this.Page.ClientScript.RegisterStartupScript(this.GetType(), string.Empty,
“CloseDialogWithDataPassed(‘” + name + “‘,’” + age + “‘,’” + dob + “‘);”, true);
}
catch(Exception)
{
throw;
}
}

Close SharePoint dialog from client side click event

The HTML is below which to be placed in the Dialog page:

<p id="closeDialog">Close the dialog</p>

The Script is below which to be placed in the Dialog page

$(function () {
$(“#closeDialog”).click(function () {
CloseDialogWithoutData();
});
});

Refresh parent page after closing SharePoint dialog

The below script is to place in the parent page and will Refresh parent page after closing SharePoint dialog.

//The below function will open the SharePoint Dialog for you
//Call the function on the button click or any other event you want with teh required parameters
//pageUrl : The page url that you going to show in the dialog
//popupTitle : Title of the dialog
//width : width of the popup(an integer value)
//height : height of the popup(an integer value)

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);
}

//Below function gets called when the SharePoint dialog box is closed, as we have mentioned it in the previous function
//buttonValue – This parameter contains the value to identify whether OK/Cancel button clicked(can be 1 for OK and 0 for Cancel)

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);
location.href = location.href;
}
}

Below script for the page , which we are showing in the dialog.

//The below function closes the dialog and passes the values to the parent page
//value1,value2,value3 – Values that I want to pass from the dialog to the parent page

function CloseDialog() {
SP.SOD.execute(‘sp.ui.dialog.js’, ‘SP.UI.ModalDialog.commonModalDialogClose’, 1, values);//1 for ok button click
}

Below button click is for the button present in the page, which we are showing in the dialog.

protected void btnClose_OnClick(object sender, EventArgs e)
{
try
{
this.Page.ClientScript.RegisterStartupScript(this.GetType(), string.Empty,
“CloseDialog();”, true);
}
catch(Exception)
{
throw;
}
}

Here we saw a few examples like, Open SharePoint dialog, Close SharePoint dialog from server side button click(button in the dialog), Close SharePoint dialog from client side click event.

SP.UI.ModalDialog.showModalDialog() not working in SharePoint 2013

Have you ever tried using SP.UI.ModalDialog.showModalDialog(options) in SharePoint 2013. I discovered some strange behavior…

After migrating my code from SharePoint 2010 to SharePoint 2013 the calls to showModalDialog failed with message that the method cannot be found (javascript). When checking it in IE Developer Tools this isn’t surprising at all. The required js-file isn’t loaded.

But why? I guess it must be the new SOD-Model (Script on Demand) that was introduced in SharePoint 2013.

SharePoint 2010 Example:

function ShowServerInformation() {
var options = {
url: '/_layouts/Management/GeneralInformation.aspx',
tite: 'Management Information',
allowMaximize: false,
showClose: true,
width: 430,
height: 230
};
SP.UI.ModalDialog.showModalDialog(options);
return false;
}

It’s very easy to fix this problem.

Follow below steps:

Remove the Java Script reference.
<script src="/_layouts/sp.js" type="text/javascript"></script>
<script src="/_layouts/SP.UI.Dialog.js" type="text/javascript"></script>
Add to the url variable "?IsDlg=1″`
Replace the command SP.UI.ModalDialog.showModalDialog() with the new command SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);

After this few changes your solution will work correctly.

SharePoint 2013 Example:

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

return false;
}

Notice: I first tried the “executeOrDelayUntilScriptLoaded”-function. But it was not of much help. It just “swallowed” my function call but never executed it because the js-file I specified was never loaded.

This is how to fix error SP.UI.ModalDialog.showModalDialog() not working in SharePoint 2013.

You may like following SharePoint tutorials:

• SharePoint ULS Logs
• PowerShell SharePoint list operations
• CAML Query Builder for SharePoint
• SharePoint List Column Validation Examples

Here we learned how to display modal popup in SharePoint using client-side code.