After the previous example of integrating jQuery and ASP.NET AJAX to display modal progress indication, there were requests that I follow it up with an example of also displaying the confirmation modally. So, I’m going to expand the original post with a technique for doing exactly that.

If you missed my first post on the topic, do be sure to read it first. Otherwise, this continuation may be difficult to follow.

Refactoring the progress indication CSS

In the previous example, our only goal was progress indication. So, it made sense to override BlockUI’s default CSS styling to display the progress animation. Now that we will be displaying two separate modal elements, that CSS will need to be refactored:

div.blockMsg {
  background-color: #FFF;
  border: 1px solid #ddd;
  height: 100px;
  text-align: center;
  width: 270px;
}
 
.progress {
  background-image: url(images/progress-indicator.gif);
  background-position: center center;
  background-repeat: no-repeat; 
}

This allows us to selectively apply the progress indication CSS, without it being tied to all BlockUI modal elements.

Applying that refactored progress indication

Now that the CSS is refactored, the original save Button event handler needs to be updated so that it applies this new progress class to its specific BlockUI element.

You’ve probably heard a lot of general praise for CSS selectors, but this task is a great, specific example of their usefulness. Since the BlockUI message doesn’t have an ID property, accomplishing this task without CSS selectors would be messy.

Conversely, jQuery makes easy work of this task:

// Add the BlockUI call as an onclick handler
//  of the Save button.
$addHandler($get('Save'), 'click', function() {
  $('#EntryForm').block({ message: null });
 
  // Add the progress indicator.
  $('.blockMsg').addClass('progress');
});

Immediately after the BlockUI invocation, we use jQuery to select the message container element that it created and add the progress CSS class to it. The end result is the same modal progress indicator that we created in the last example, without requiring that its styling be added to BlockUI’s defaults.

Swapping confirmation for progress indication

In order to display a modal confirmation dialog after the partial postback finishes, we’ll need to add some additional code in our EndRequest handler:

prm.add_endRequest(function(args, sender) {
  // Instantly remove the progress indication element.
  $('#EntryForm').unblock({ fadeOut: 0 });
 
  // Block the form, using our Panel's content
  //  as the block "message".
  $('#EntryForm').block({ message: $('#ConfirmSave') });
});

Specifying a fadeOut parameter for the unblock() call is important because BlockUI defaults to using a fadeOut value of 400 milliseconds. That normally looks great, but we want to instantly swap confirmation in for progress indication here, so it’s crucial that we remove the progress indication with no delay.

Immediately after hiding the progress indicator, we call block() on the entry form’s <div> again. However, this time we’ll use its message parameter to specify our contextually updated Panel as the element to be displayed modally.

The end result of these two operations is a seamless transition from a client-side progress indicator to the contextual confirmation dialog that we generated on the server-side.

A UI element to close the confirmation dialog

Now that we’ve displayed the confirmation dialog, the next natural step is to give the user a way to close it.

First, we need to add a UI element to the confirmation Panel:

<ContentTemplate>
  <asp:Panel runat="server" ID="ConfirmSave" Visible="false">
    <h3><asp:Literal runat="server" ID="CustomerName" /> added</h3>
 
    <a href="#" id="CloseConfirm">Close</a>
  </asp:Panel>
</ContentTemplate>

Wiring up functionality to that element

With the link added to our confirmation message, the final step is to wire up an onclick handler for that <a> element. We’ll wire that up in the EndRequest event:

$('#CloseConfirm').click(function(evt) {
  // Prevent navigation when the link is clicked.
  evt.preventDefault();
 
  // Unblock the form, and remove the confirmation
  //  div afterward. This prevents it from showing
  //  up below the form after BlockUI releases it.
  $('#EntryForm').unblock({
    onUnblock: function() {
      $('#ConfirmSave').remove();
    }
  });
});

$addHandler would work work here too, so use what you’re comfortable with. I chose to use jQuery’s event handler mechanism so that the sample code contains an example of both methods.

The onUnblock callback function is necessary to remove the confirmation Panel from the DOM. Otherwise, it would simply revert to rendering below the entry form after unblock() completed.

End result: when the close link is clicked, the confirmation dialog will fade out over the course of 400ms and then disappear from the page completely.

Conclusion

I’ve been using this BlockUI technique in my applications for about a year. During this time, I have found it to be extremely powerful, yet easily implemented and maintained.

End users love the fade effect too. Often, the smallest details count the most.

If you’re wondering to yourself what good a modal window with a close button could possibly be, here’s a screenshot (from one of my apps) of the technique in action:

This BlockUI modal is presented to users after saving a somewhat complex form. We’ve found that blocking the page and presenting limited options improves productivity, by subtly guiding users toward desirable actions.

I hope this technique helps you find similar usability gains in your own applications.

Download the source and see it in action