Show Dialog Modal in SharePoint 2013

The quick way to open a sharepoint 2013 dialog modal form is via Javascript below


function OpenPopUpPage(url, callback, width, height)

function OpenPopUpPageWithTitle(url, callback, width, height, title)

function OpenPopUpPageWithDialogOptions(dialogOptions)

The dialogOptions supports the following

Options Property Description
title A string that contains the title of the dialog.
url A string that contains the URL of the page that appears in the dialog. If both url and html are specified, url takes precedence. Either url or html must be specified.
html An Element (such as DIV)  A string that contains the HTML of the page that appears in the dialog. If both html and url are specified, url takes precedence. Either url or html must be specified.
x An integer value that specifies the x-offset of the dialog. This value works like the CSS left value.
y An integer value that specifies the y-offset of the dialog. This value works like the CSS top value.
width An integer value that specifies the width of the dialog. If width is not specified, the width of the dialog is autosized by default. If autosize is false, the width of the dialog is set to 768 pixels.
height An integer value that specifies the height of the dialog. If height is not specified, the height of the dialog is autosized by default. If autosize is false, the dialog height is set to 576 pixels.
allowMaximize A Boolean value that specifies whether the dialog can be maximized. true if the Maximize button is shown; otherwise, false.
showMaximized 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 autosized size.
showClose A Boolean value that specifies whether the Close button appears on the dialog.
autoSize A Boolean value that specifies whether the dialog platform handles dialog sizing.
dialogReturnValueCallback A function pointer that specifies the return callback function. The function takes two parameters, a dialogResult of type SP.UI.DialogResult Enumeration and a returnValue of type object that contains any data returned by the dialog.
args An object that contains data that are passed to the dialog.

This is with assumption that the following SharePoint JS file are loaded:

  1. SP.Core.js
  2. SP.UI.Dialog.js
Hence,  you can always add this js to your custom app to do the call out!
for example

OpenPopUpPageWithTitle('http://wp.ahcheng.com',null,null,null,'Ah Cheng SharePoint');

SharePoint Dialog Modal Form Javascript

How to Refresh Page upon closing/submitting a SharePoint Dialog Form

I have received couple of comments on how to actually Refresh a source page (where you trigger the dialog form) upon clicking button in a dialog page.

First of all, the source page needs to have the callback function. Example below shows how to open a page in SharePoint Dialog form with callback.


function MyJSMethodWithCallBack()
{
  var dialogOptions = {
    url : "URL OF THE PAGE",
    dialogReturnValueCallback: function(dialogResult){
      //Where you can do additional JS function base on the dialogResult.
      SP.UI.ModalDialog.RefreshPage(dialogResult);
    }
  };

  OpenPopUpPageWithDialogOptions(dialogOptions);
}

Note: You can refer to MSDN for the DialogResult

Once you have the callback method in the source page, you need to have DOM in the Destination (be it button or anchor) to close or commit the dialog.

If you are using “url” to open a dialog, you can use the following example below to close it (it has to be written in the destination page)

 <a href="#" onclick="window.frameElement.cancelPopUp(); return false;">Close Dialog </a>
 <a href="#" onclick="window.frameElement.commitPopup(); return false;">OK </a>

The difference between the two methods is that the CommitPopup will return SP.UI.DialogResult.OK while CancelPopup will return SP.UI.DialogResult.cancel to the callback method.

If you are using “html“, a dynamically generated content as the content of the dialog, the way to handle the closing of Dialog is slightly different. When we use HTML, there is no IFrame concept and the button/anchor that run the JavaScript are sitting within the same window. In this case, window.frameElement will be a Null value.

You need to run the below Javascript to close it

 SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK);

 SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel);

Example of using HTML for Dialog Modal

The JavaScript below show how to call Modal Dialog with your own HTML

 var html = document.createElement('div');
 html.innerHTML = '<h1>Hi! Welcome to SharePoint</h1>\
 <a href="#" onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel); return false;">Close Dialog</a>\
 <a href="#" onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK); return false;">OK</a>';
 OpenPopUpPageWithDialogOptions({
  title: "HTML Content",
  html:html,
  dialogReturnValueCallback: function(dialogResult){
   alert(dialogResult); //Add your custom code here.
   //If you want to refresh your page base on the dialog result , OK=1, cancel = 0, run the following
   SP.UI.ModalDialog.RefreshPage(dialogResult);
  }
 });

Note that I’m using document.createElement(‘div’) and inject the HTML content into the .innerHTML property.
Copy and run the code. And you should see dialog below
 html content dialog modal

28 thoughts on “Show Dialog Modal in SharePoint 2013

  1. Raj

    Hi,

    I have a question. How can we load the three files on the master page. I was tying to do that but i am getting an error.

    Thanks

    Reply
  2. Ah Cheng Post author

    Hi Raj,
    One way to ensure it will definitely work is by inheritting the SharePoint LayoutsPageBase

    < %@ Page Language="C#" Inherits="Microsoft.SharePoint.WebControls.LayoutsPageBase" DynamicMasterPageFile="~masterurl/default.master" %>

    Reply
  3. thilosh

    Hi ,
    I am facing problem in the callout.I have a button through which I am opening another page as popup using OpenPopUpPageWithTitle() ,but from the popup window I want to send a paramater Like “OK” or “Cancelled” and perform from functionality based on the return values.

    Reply
  4. Ah Cheng Post author

    Hi thilosh,

    You actually need to have a custom button inside the dialog page.

    Try adding a button something like this
    <input type="button" value="Ok" onclick="javascript:SP.UI.ModalDialog.commonModalDialogClose("1";"ValueToReturn");"/>​​​​​​

    When calling this page, make a callback function.

    OpenPopUpPageWithTitle(‘URL_TO_YOUR_PAGE_WITH_CUSTOM_BUTTON’,function(a,b){alert(a);alert(b);},null,null,”Test”)

    Reply
  5. Roy

    Is it possible to do this from inside of a custom web part that is written in C#. I am trying to find examples that are dealing with SharePoint 2013 but so far no luck.

    Reply
  6. Loki

    Hi. I want to open the NewForm.aspx of a List with a modal dialog in my app. The List itself is nested in the site content of the site collection that contains the app. But I get Access Denied / Cannot be displayed in an iframe errors.

    Do you have any Idea what I am doing wrong? I posted a question on sharepoint.stackexchange.com -> goo.gl/Zmycem

    Maybe you can help me.

    Reply
    1. Ah Cheng Post author

      Hi, may I please check your apps URL and the URL of the list that you are calling? I noticed that you are using relative path. It may cause page not found if the app and list are in different Host name!

      Reply
  7. Ofer

    Any advice on how to handle a large post to the target page? is it enough to have a form tag around all the control I want visibility to in the target?

    Reply
    1. Ah Cheng Post author

      You may want to try doing this JS after the dialog is loaded
      var aDlg = SP.UI.ModalDialog.get_childDialog();
      aDlg.$$d_autoSize();

      These are SP OOTB JS function. Not sure if it will helps.
      Alternatively, you can cast your Width and Height via OpenPopUpPageWithDialogOptions method.

      Another parameter may be worth-noting, for example showMaximized, which open your dialog form in full sized mode.

      Something like below
      OpenPopUpPageWithDialogOptions({url:’/_layouts/15/viewlsts.aspx’,showMaximized : true});

      Reply
  8. Lamla

    Hi,

    Please help, I’m trying to show on the dialog a div within the same page. in a div I have a textbox and a button. When a button is clicked I want to add an item to a list. I tried this and the div is displayed only on the first click.

    Reply
    1. Ah Cheng Post author

      My preliminary assessment on your way of doing is that, once you closed the dialog form, the HTML DOM are all removed and hence, for the subsequent call, the HTML DOM are no longer existing.

      Possible to move your div into a single application page which takes in URLs for whatever query string you want to pass over? With this, each open/close of dialog will reload the page again and the HTML DOM will always be there.

      Reply
  9. Ramachandran

    When I integrate Open popup for the link which shows data from other list, i am facing unexpected error showed in the popup. Please any one help me

    Reply
    1. Ah Cheng Post author

      Hi Ramachandran,

      Please kindly verify if the URL that you are calling is correct.
      Assuming you are in a subweb “/yy/Lists/A”

      When you are in the List A and would like to open dialog for List B, please include subweb path e.g. “/yy/Lists/B” for the Dilaog URL.

      Reply
  10. charlie price

    Good Afternoon! I am using a Content Search web part to pull list items from a different host headersite collection (this works fine). What I would like to do is open the items in a modal dialog which I almost have working using:

    Read More

    The window pops up and loads the list item from the other site collection but there are many problems with the functionality of the window at that point. The close button at the bottom does nothing, as does the Edit Item button.

    Ideally I would like the list item from the other site collection to work as normal in a modal dialog box in a different site collection.

    Any ideas?
    Thanks!

    Reply
    1. Ah Cheng Post author

      Hi Ad, I made changes to the code in example of Using HTML for Dialog Modal.
      You simply need to put in method SP.UI.ModalDialog.RefreshPage( dialogResult ) in the call back.

      Reply
  11. Marco

    Thank you for your very useful post!
    Do you think is possible to create a link (opening in modal) by a snippet I use in a page layout? I mean, to open a dynamic link in modal. So far I didn’t find an easy solution.

    Reply
  12. Alex Talarico

    Could you please show a quick example for using the html attribute of the dialogoptions while having a save & cancel button? i\’m looking to display a page from another site, and on the dialog show buttons separate from the page i need to show. Thank you!

    Reply
    1. Ah Cheng Post author

      Hi Alex,
      Are you trying to put HTML content with IFRAME and button? You need to make sure your “Another Site” is allowing IFRAME. Or else you will hit iframe refused error.

      I added a sample code for your reference :)

      Reply
    1. Ah Cheng Post author

      Yes Vikram, you can use that but that is just not generically available for some pages. I believe NewEvent only available when u are in Calendar page?
      Likewise if you are in List View page, you should see NewItem2 instead. But using those above should be safe as it is available..

      The event more secure way of doing is by using
      SP.UI.ModalDialog.showModalDialog function but that requires you to put contract the dialog options while the step above is a quicker way for a beginner? :)

      Reply
  13. Andy

    Hi,
    I implemented your version of “HTML for Dialog Modal”
    The dialog box popups up after I hit Save. That’s the desired affect.
    However, it disappears within seconds. Then the whole page does a refresh. I”m attaching this to the Save button of New Item dialog box. I would expect after they hit save, i can display a thank you message, item gets saved, then redirect user to another SP page.

    Thanks,
    Andy

    Reply
    1. Ah Cheng Post author

      Hi Andy,
      I believe the Save button that you are attaching the script may not work because the Save button itself may have a Refresh or postback that refreshes your entire page, the Open dialog script above requires the page to stay within the current page, as in not refreshing or posting back.
      There is few way i can think of to achieve what you intended.
      1) Create a new button as “Save” which show the dialog modal like above, hide the original Save button from the SP Form. In the Callback function, you will check if the dialog result is == 1 (ok) then you trigger the onclick event of the original Save button (via js)
      2) You can make use of PreSaveAction trick in SP. Simply run this
      PreSaveAction = function(){ return confirm(“thank you, ok to proceed”);
      And when clicking the Save button, this function will actually fire and it is expecting a “true” result to proceed the post back. This step is simple as it is synchronous, it is much complicated to use dialog modal for this effect as it is asynchronous and you need to know how to manage the return of “true” synchronously. Will leave it to you for this 😀

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

AlphaOmega Captcha Classica  –  Enter Security Code