In SharePoint 2013 you may run into an error message stating that a Modal Dialog is  “Unable to get property ‘showModalDialog’ of undefined or null reference”. This generally happens when you attempt to use the Modal functionality within SharePoint (SP) 2010 or 2013. The Modal Dialogs are basically pop up windows that work within the SP environment.

The Modal Dialog is built into the SP native JavaScript that is loaded onto the page…most of the time. You will get this error message if you are missing that one piece of JavaScript that SP needs to actually create modal dialog from its own library. Essentially, the library was not loaded onto the page for some reason.

Most of SPs resources are loaded on an “as-needed” basis and SP knows how to take care of these resources on its own. But every once in a while, it forgets to load a file or two. So lets force it to do that.

Update your JavaScript function (in my case, I’m using jQuery) to ensure that the SP.UI.Dialog.JS file is loaded and it is invoking the correct inner function for the Modal dialog. Change your modal call from

SP.UI.ModalDialog.showModalDialog(options)

to this

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

Once thats done, save and refresh your page. You Modal Dialog error message should be all set and you shouldn’t see the “Unable to get property ‘showModalDialog'” message.

Example:

 $(".clickCIOGroup").click(function(){
  //Using a generic object.
  var options = {
      title: "Grouped by CIO",
      width: 700,
      height: 800,
      url: "{{URLOFITEMTODISPLAY}}/Grouped%20by%20CIO.aspx?IsDlg=1" };
  
  SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
 });

Resources:

• https://msdn.microsoft.com/en-us/library/office/ff407807(v=office.14).aspx
• https://social.msdn.microsoft.com/Forums/office/en-US/a7ae308b-5097-4ec9-9d34-1603ebc1df6d/sharepoint-modal-dialogs?forum=appsforsharepoint