Post
Ask Question

Create Modal Dialog Pop Up In SharePoint 2016 And Office 365

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,

  1. 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’.
  1. var options = {  
  2.     url: '/sites/Playground/Pages/New%20Publishing%20Page.aspx?IsDlg=1', //Set the url of the page  
  3.     title: SharePoint Modal Pop Up ', //Set the title for the pop up  
  4.     allowMaximize: false,  
  5.     showClose: true,  
  6.     width: 600,  
  7.     height: 400  
  8. };  
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:
  1. <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>  
  2. <script language="javascript" type="text/javascript">  
  3.     $(document).ready(function() {  
  4.         SP.SOD.executeFunc('sp.js', 'SP.ClientContext', showModalPopUp);  
  5.     });  
  6.   
  7.     function showModalPopUp() {  
  8.         //Set options for Modal PopUp  
  9.         var options = {  
  10.             url: '/sites/HOL/Pages/Custom-Publishing-Page.aspx?IsDlg=1', //Set the url of the page  
  11.             title: 'SharePoint Modal Pop Up', //Set the title for the pop up  
  12.             allowMaximize: false,  
  13.             showClose: true,  
  14.             width: 600,  
  15.             height: 400  
  16.         };  
  17.         //Invoke the modal dialog by passing in the options array variable  
  18.         SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);  
  19.         return false;  
  20.     }  
  21. </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:

    Content Editor

  • Click Edit Web part, as shown below:

    Web part

  • Add the URL of the Script file in the site Assets library to the content link section.

    Add the URL

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:

implementation

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


Similar Articles