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

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

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.