Opening a page or HTML in dialog box or popup is very usual and very essential for most of the modern-day applications. In SharePoint, we have JavaScript API that we can leverage to achieve with a lot of options. Let’s check all the options and end to end implementation for this.

Simple Implementation of SP.UI.ModalDialog.showModalDialog

Here, I have mentioned steps for the example/demo purpose. You can modify according to your requirement but implementation remains the same.

1. Create a Web Part page and add a Content Editor Web Part and a Script Editor Web part.

2. In Content Editor Web Part add below HTML code
   <button type="button" onclick=" OpenDialog()">Open Dialog</button>
3. In Script Editor Web Part Add below code. You can also put the JavaScript code in a JS file and add a reference over here.
• function OpenDialog() {
•     var Itemid = 2;
•     var htmltag = document.createElement('div');
•     htmltag.innerHTML = 'Item Id is ' + Itemid + '';
•  
•     var pageUrl = _spPageContextInfo.siteAbsoluteUrl + "/SitePages/dialogpage.aspx?id=" + Itemid;
•     var options = SP.UI.$create_DialogOptions();
•     options.title = 'My Modal Dialog';
•     options.width = 400;
•     options.height = 400;
•     options.showClose = true;
•     options.html = htmltag;
•     options.url = pageUrl;
•     options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
•     SP.UI.ModalDialog.showModalDialog(options);
• }
•  
• function CloseCallback() {
•     console.log('This the function gets triggered when you close the Modal Dialog');
• }
4. Save the page and click on the button. You will be able to see the pop-up. If both URL and HTML is specified then URL take the precedence. It is mandatory to provide either URL or HTML.

SharePoint Modal Dialog options

There are a few options available for dialog box properties.

Reference is taken from Microsoft Docs.

SharePoint Modal Dialog box not opening?

sp.ui.dialog.js is the JavaScript library provided by SharePoint which is responsible for dialog box pop up. So, if the dialog box has issues opening, maybe it is because of this JS file is not getting loaded before this method call. You can write it like this in the above example. This will ensure that sp.ui.dialog.js file is getting loaded before it calls Modal Dialog.

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

Dialog box shows and disappears immediately?

You may encounter an issue like the dialog box opens and suddenly closes.

There is a solution to this.

• You can provide type=”button” in your button html tag. Like mentioned below.
  <button type=”button” onclick=" OpenDialog()">Open Dialog</button>

Some additional Modal Dialog Methods

1. Close dialog box with dialog result:

   You can use the below method in dialog box page to close the dialog box. You can also send the result type OK/Cancel. This will be helpful if you want to perform any action based on result coming from pop up page.

2. Send results values from the Dialog box to Parent Page:

   You can also send some data from pop up page to the parent page. This will be helpful if you want to perform any action on data that are passed to the parent page.

3. Refresh Parent Page after modal Pop up closes:

   Sometimes you will need to refresh the parent page after you close the pop-up page

   Note:

   Refreshes the parent page of the modal dialog when the dialog is closed by clicking OK. This only works when the modal pop up is closed with “OK” result and not “Cancel” result

All the above scenarios are explained in the example below (Go through Comments inline within code).

Example:

Parent Page:

Html:

Script:

Pop up Page:

Html:

Script:

SharePoint pop up without these many options

If you want to just open a page in a pop up then you can choose any of the below methods. But make sure that your page is responsive enough because going this way, may break your page or look odd in pop up.

1. Use a Pop-up method and pass just URL of the page

   Example:

   <a onclick="javascript:SP.UI.ModalDialog.ShowPopupDialog(‘https://Server URL/site URL/SitePages/home.aspx’)">Show Pop Up</a>

   This is the best option when you don’t want to use any of the options that SharePoint Modal Dialog APIs provide and just want to open the SharePoint page in a dialog giving a URL.

2. Append ?IsDlg=1 after the URL:

   This will work only in classic SharePoint just take a URL and append ?IsDlg=1 after that.

   Example:

   <a href=”https://Server URL/sites/site URL/SitePages/dialogpage.aspx?IsDlg=1”>Open in Pop Up</a>

Conclusion:

We went through the different APIs provided by SharePoint to open a page in Modal Dialog or Pop up box.