Latest Posts

How to open SharePoint page in Dialog box

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. Webpart page content editor and scipt editor
  3. In Content Editor Web Part add below HTML code
    <button type="button" onclick=" OpenDialog()">Open Dialog</button>
  4. 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');
    • }
  5. 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.
  6. Modal dialog box

SharePoint Modal Dialog options

There are a few options available for dialog box properties.

Property Description


To specify the title of the dialog box


To specify the page URL that needs to be opened in the dialog box. If both URL and HTML is specified then URL take the precedence. It is mandatory to provide either URL or HTML


To specify the HTML that needs to be opened/shown in the dialog box. If both URL and HTML is specified then URL take the precedence. It is mandatory to provide either URL or HTML


To specify x-offset (Integer) of the dialog. It is like CSS left value


To specify y-offset (Integer) of the dialog. It is like the CSS top value


To specify the width of the dialog in Integer. The width will be auto-sized if it is not specified. If autosize property is false, it will set to 768px.


To specify the height of the dialog in Integer. Height will be auto-sized if it is not specified. if the autosize property is false, it will set to 576px.


A Boolean value that specifies whether the dialog can be maximized. true if the Maximize button is shown; otherwise, false.


A Boolean value that specifies whether the dialog opens in a maximized state. true the dialog opens maximized. Otherwise, the dialog is opened at the requested sized if specified; otherwise, the default size, if specified; otherwise, the authorized size.


A Boolean value that specifies whether the Close button appears on the dialog.


A Boolean value that specifies whether the dialog platform handles dialog sizing.


A function pointer that specifies the return callback function. The function takes two parameters, a dialog result of type SP.UI.DialogResult Enumeration and a return value of type object that contains any data returned by the dialog.


An object that contains data that are passed to the dialog.

Reference is taken from Microsoft Docs.


  • If you don’t want the title in the popup, you can specify space (‘ ‘) in it. “” or null will not work
  • It is mandatory to provide either a url or html parameter. Rest of the parameters are optional.
  • If both URL and html are specified then URL take the precedence.
  • You can also pass parameters to pop up as shown in the example

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


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


Parent Page:


<button type=”button” onclick=" OpenDialog()">Open Dialog</button>


  • function OpenDialog() {
  •     var pageUrl = _spPageContextInfo.siteAbsoluteUrl + "/SitePages/dialogpage.aspx";
  •     var options = {
  •         url: pageUrl,
  •         title: 'My Modal Dialog',
  •         allowMaximize: false,
  •         showClose: true,
  •         width: 400,
  •         height: 400,
  •         dialogReturnValueCallback: Function.createDelegate(null, function (result, returnValue) {
  •             // Check Result - Scenario 1
  •             if (result == SP.UI.DialogResult.OK) {
  •                 alert('OK');
  •                 // Check Result Values - Scenario 2
  •                 if (returnValue != null) {
  •                     alert('Return Values - ' + returnValue[0] + ' - ' + returnValue[1]);
  •                 }
  •                 else {
  •                     alert('No return value');
  •                 }
  •                 // Refresh Parent Page after modal Pop up closes - Scenario 3
  •                 SP.UI.ModalDialog.RefreshPage(result);
  •             }
  •             else {
  •                 alert('Cancel');
  •             }
  •         })
  •     };
  •     SP.UI.ModalDialog.showModalDialog(options);
  • }

Pop up Page:


<button type=”button” onclick="CloseDialog()">Close Dialog</button>


  • function CloseDialog() {
  •     var retunValuesFromPopUp = [];
  •     retunValuesFromPopUp[0] = 'One';
  •     retunValuesFromPopUp[1] = 'Two';
  •     SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, retunValuesPopUp);
  •     // OR
  •     SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.Cancel);
  • }

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


    <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.


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


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

We value your Feedback:

Page URL:







© 2024 Code SharePoint