Show Dialog Modal in SharePoint 2013

SharePoint 2013 admin

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

[sourcecode language=”javascript”]

function OpenPopUpPage(url, callback, width, height)

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

function OpenPopUpPageWithDialogOptions(dialogOptions)

[/sourcecode]

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

[sourcecode language=”javascript”]

OpenPopUpPageWithTitle(‘http://ahcheng.com’,null,null,null,’Ah Cheng SharePoint’);

[/sourcecode]

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.

[sourcecode language=”javascript”]

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);
}
[/sourcecode]

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)

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

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

[sourcecode language=”html”]
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK);

SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel);
[/sourcecode]

Example of using HTML for Dialog Modal

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

[sourcecode language=”javascript”]
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);
}
});

[/sourcecode]

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

32 thoughts on “Show Dialog Modal in SharePoint 2013”

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

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

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

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

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

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

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

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

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

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

  20. Hi,

    Do you know if its possible to call the .js files from a solution outside of Sharepoint? We are currently trying to separate some of our user interfaces to get better debugging, but I have the issue that all my user interfaces is displayed to the user within a modal dialog, and hosting the user interfaces outside of Sharepoint in its own web forms applicaiton, I get the error Type is not defined in sp.ui.dialog.js.

    Reply

    1. HI Stine,

      I don’t think it is wise to use the model OUTSIDE of SharePoint as the JS has a lot of dependencies on other SharePoint JS files. Suggest to use other third party to display Modal instead.

      Reply

  21. Hi, I am having a similar issue as Andy is having where I am trying to target the click event of the OK button, so I can display a loading page while the file is uploading on the AttachFile modal. Otherwise it can sit there and do nothing while the file uploads and users can wonder what is going on or if they need to click it again etc.

    I bind to the iframe and find the aspnetForm and then have tried attaching to the onsubmit event, the ctl00_PlaceHolderMain_btnOK click event, etc. These work but once the item submits I get a “Permission denied” even though it is coming from the same SharePoint site and should have the same domain. It appears the button click happens and then the file uploads and the event doesn’t try and fire until AFTER the modal closes, which I assume is being denied because there is no modal there. When I put the call inside the .bind event, it fires again but then the length of the iFrame is 0 at that point meaning its no longer there.

    I know there HAS to be a way to do this and it’s very frustrating Microsoft would leave this crappy functionality with no way of attaching a loading screen or even activation their OWN loading modal. I can either activate the modal once the attach file modal pops up or once it closes but not in relation to when the ‘OK’ button is clicked to actually upload the file. I know I can wait for the result to come back but that defeats the purpose because at that point the file is already uploaded. I need a way to display a loading page in between the OK button(id: ctl00_PlaceHolderMain_btnOK) and the result coming back(ie, it appears when the OK button gets clicked and disappears once the dialogresult from the modal returns). Any suggestions? Nothing I have tried has worked so far. Using jQuery—either I get a permission denied error or the iFrame length is 0—its almost like the element doesn’t allow event handlers on it.

    Reply

Leave a Reply

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