I have created a new CustomAction which is a new item (link) in Site Actions menu. When you click it, it opens a modal page (aspx). Everything works fine, but it takes about 3 seconds to open the Modal page.

What I want to do is show a "loading" div while it opens the Modal page which will disappear when the page has been loaded completely. My code is as follows:

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="SitePageModule" Url="SitePages" Path="SitePageModule">
    <File Url="CreateWorkspace.aspx" Name="workspace.aspx" Type="Ghostable" />
  <CustomAction Description="create new workspace"
            Title="create new space">
    <UrlAction Url="javascript:OpenPopUpPageWithTitle('/SitePages/workspace.aspx?url={SiteUrl}', RefreshOnDialogClose, 965, 570,'create')"/>

1 Answer 1


You can use one of the following methods: SP.UI.ModalDialog.showWaitScreenSize or SP.UI.ModalDialog.showWaitScreenWithNoClose. Example:

waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose("Loading...", "Please wait while data is retrieved...", 60, 280);
--------wait for something--------

Check out all methods for dialog class here

Complete code will look something like this: (see update)

<UrlAction Url="javascript:OpenPopUpPageWithWaitScreen('/SitePages/workspace.aspx?url={SiteUrl}', RefreshOnDialogClose, 965, 570,'create')"/> 


function OpenPopUpPageWithWaitScreen(url, callback, w, h, title){
   //this line will attach waitDialog variable to window object
   waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose("Loading...", "Please wait while data is retrieved...", 60, 280);
  OpenPopUpPageWithTitle(url, callback, w, h, title);

In your page you also need some javascript, to close wait screen when page loads:

ExecuteOrDelayUntilScriptLoaded(CloseWaitScreen, "sp.ui.dialog.js");
function CloseWaitScreen(){

I haven't tested it, but if you have some troubles, I try to help.

Above code will not work, because I digged deeper in SP.UI.Dialog.debug.js and found how wait screen working for out of the box sharepoint functionality. For example when we push new item button on some list, there is a wait screen (sometimes) appears, then modal window opens. All magic in this piece of code:

if (this.get_$10_0() && this.$0_0) {
            window.setTimeout(Function.createDelegate(this, function() {ULSTYE:;
                if (!this.$1i_0 && !this.$p_0) {
                    this.$M_0 = SP.UI.ModalDialog.$2O();
            }), 1000); 

Shortly, this code do the following: if width and height for modal dialog is not specified and modal dialog displays some url in iframe(if (this.get_$10_0() && this.$0_0)), then setup timer (which will trigger after 1sec). After 1sec, if iframe not loaded (script track when iframe loaded by listening onload event - this line attaches to load event - $addHandler(this.$0_0, 'load', this.$1O);), so if iframe after 1sec not loaded wait screen will be shown (this.$M_0 = SP.UI.ModalDialog.$2O();) this.$M_0 store reference to this wait screen, and it will be automatically closed when onload event for iframe will be fired.

Conclusion: if you want to show wait screen, you need pass null instead of width and height (or not to initialize this parameters, if you are using dialog options object):

<UrlAction Url="javascript:OpenPopUpPageWithTitle('/SitePages/workspace.aspx?url={SiteUrl}', RefreshOnDialogClose, null, null,'create')"/>

Doing this wait screen will be automatically open after 1sec if your page hasn't been loaded yet (I've tested, its working). Width and height for dialog will be calculated by script and will be fit width and height of content.
Why so weired at first glance behavior? Because if we specify width and height for dialog, it will be immediately open, and the content start loading, so you can't see you wait screen, because in front of the page will be your dialog with actual width and height (this is design of modal dialog class).
Ok, if I want to set width and height, but want also to see wait dialog? Bad news, it will be rather complicated. You need to pass null as width and height for dialog, then attach to onload event for your iframe (as dialog class do it), then when onload fires you need change size of iframe using script.

  • Thank you so much, just one question, where do I need add OpenPopUpPageWithWaitScreen method? in my element.xml file?
    – Medes
    Commented Dec 30, 2011 at 18:22
  • Since you are creating new site actions element, you need to persist this method to all pages, thats why you need to add it to master page. The easiest way to do it is create custom javascript file and add it to master page using SharePoint:ScriptLink control (if you are using custom master page), if not you can add link to custom script using Custom Action (Delegate Control- weblogs.asp.net/jan/archive/2008/11/20/… or ScriptSrc - weblogs.asp.net/jan/archive/2010/03/01/…) Commented Dec 30, 2011 at 19:08
  • Both link about adding jQuery, but you can add any script you want of course. Commented Dec 30, 2011 at 19:09
  • Please, see my update, I found more info on your question :) Commented Jan 1, 2012 at 8:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.