How to Use Window.WaitDialog from our Custom Javascript in SharePoint 2013

In some places, we may need to show the Waiting dialog with a Processing Gif Image. For that, sharepoint provides us an option called Window.WaitDialog.

Something like the below image is the objective.

Usually the scenario where we will be using this is something like, when an operation is going to take a long time, the end user should not do any other action item before the back ground operation completes. For that the javascript function would be as follows.

 <script>
 function showWaitScreen() {
             if (typeof (Page_ClientValidate) == 'function') {
                 Page_ClientValidate();
             }
 
             if (Page_IsValid) {
                 window.parent.eval("window.waitDialog = SP.UI.ModalDialog.showWaitScreenWithNoClose('Please Wait', 'Please wait as this may take a few minutes...', 150, 400);");
             }
         }
 </script>
 
     <asp:Button runat="server" ID="UploadButton" Text="Upload" OnClick="UploadButton_Click" OnClientClick="javascript:showWaitScreen();" />
 

The server side code would be

 protected void UploadButton_Click(object sender, EventArgs e)
         {
              // Do the complex operations here and at the end of the complex operation, we need to close the dialog box which we opened.
 
             this.ClientScript.RegisterStartupScript(this.GetType(), "CloseWaitDialog", @"
                     <script language='javascript'>
                         if (window.frameElement != null) {
                             if (window.parent.waitDialog != null) {
                                 window.parent.waitDialog.close();
                             }
                         }
                     </script>");
         }
 

This seems to be very straight forward. But, implementing this will give a different feel to the customers. They will feel better by looking these kind of useful popups.

Happy Coding.

Sathish Nadarajan.