Create Modal Dialog Pop Up In SharePoint 2016 And Office 365

Priyaranjan K S

Office 365 SharePoint 2016Modal Dialog Pop Up

10 Comments

Join the conversation! Your thoughts help the community grow.

Mike Rodgers4y ago
Priyaranjan does this work on SharePoint Online?
Lucas Monahan6y ago
Thank you for your great explanations and examples. Is there any advice you have for faster pop up load time? Or could you omit the jquery to use the _spOnPageLoadFunctionNames.push?
Michael Lucas6y ago
The java script file in the assets library do you save this as a .js file or html
Steve Boyd7y ago
How does this work in O365 exactly? create a new publishing page? how?
Fabian Hoogvorst7y ago
Is it possible to make the popup apear only once per session and not every time the page is loaded?
Deepak Saini9y ago
How to open pop up on outlook send button click in outlook addins
subhashini o9y ago
Thank you ..i tried it , the pop up is coming but its coming a a blink and getting closed automatically.Can you help me where i am going wrong.I want the pop up to be closed by the user. Thansk in Advance.
Vignesh Mani10y ago
Nice
Raja10y ago
Nice Share....
kalu singh rao10y ago
Nice...

Quite often, a business requires the opening up of modal pop ups in the existing window. This can be for multiple reasons such as:

Show a message to the user; i.e., something like a notification.
Display a different page as pop up, when the user clicks on a button in the main page.
Display a form to accept input from user using modal pop up.
Show a wait/loading screen to the end user.

And so on.

SharePoint natively provides the modal pop up framework which can be utilized to open modal pop ups within the page. The modal dialogs are basically JavaScript pop ups with an iFrame within which information can be displayed. SharePoint provides SP.UI.Dialog.js file, which is a client-side library to implement the modal dialogs. It contains a static class SP.UI.ModalDialog using which, we can customize the modal dialog and call it as required.

The main invocation call for the modal dialog is given below,

SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);

Here we are making use of Script On Demand. SP.UI.Dialog.js is a Script On Demand js file which means it will be loaded to the page only when it is explicitly called using SP.SOD.Execute function. “Options” is the main parameter that will be passed as the argument to 'SP.UI.ModalDialog.showModalDialog' function. ‘Options’ is basically an array of the attributes that will govern the customization and working of the pop up. We can use any other name instead of the ‘options’.

var options = {
url: '/sites/Playground/Pages/New%20Publishing%20Page.aspx?IsDlg=1', //Set the url of the page
title: SharePoint Modal Pop Up ', //Set the title for the pop up
allowMaximize: false,
showClose: true,
width: 600,
height: 400
};

As you can see, we can specify the URL of the page that has to be opened in the pop up. Similarly, we can specify the title, width and height.

The full code of the implementation in SharePoint 2016 will look as shown below:

<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() {
//Set options for Modal PopUp
var options = {
url: '/sites/HOL/Pages/Custom-Publishing-Page.aspx?IsDlg=1', //Set the url of the page
title: 'SharePoint Modal Pop Up', //Set the title for the pop up
allowMaximize: false,
showClose: true,
width: 600,
height: 400
};
//Invoke the modal dialog by passing in the options array variable
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
return false;
}
</script>

Lets see how we can add it to the SharePoint page, so that we can see it in action.

Add the script to the text file and upload the file to the Site Assets library.

Go to the edit view of the current page by appending “? ToolpaneView=2” at the end of the current page URL.
Add a Content Editor Web part to the page, shown below:
Click Edit Web part, as shown below:
Add the URL of the Script file in the site Assets library to the content link section.

Click Apply. This will cause the pop up to appear in the page as the page loads. We can also modify the code to invoke the pop up on the button clicks.

Apply

Similar implementation can be done using the same code in SharePoint Online for Office 365, as shown below:

Thus, we have seen how we can implement modal pop ups in SharePoint 2016 and Office 365.