How to Add a Loading Screen to C# Using Jquery

With my experience from telerik, I want my entity's add and edit form to be a popup so I don't have to change screen. I'm using C# MVC3, so I tried to look for jquery add on that would do the job. Fortunately I've come up with this article: http://nickstips.wordpress.com/2011/08/11/asp-net-mvc-ajax-dialog-form-using-jquery-ui/. It uses jquery's ui dialog and mvc's partial view to render the popup form.

But sometimes the submit event in the popup form requires some time to verify the data inputted, so I definitely needed a loading screen which by default is not included with the library.

So here's how I added the loading screen:
1.) Modify DialogForm.js

//after this line
$('form', dialog).submit(function () { 
//add
var ld = $(document.createElement('div')).attr('id', 'loadingDialog');
var opaque = $(document.createElement('div')).attr('id', 'opaque');
opaque.append(ld);
$("#" + $(dialog).attr("id")).prepend(opaque); //dynamic dialog id

//and after
data: $(this).serialize(),
//add these 2 events
beforeSend: function (xhr) {
  $('#opaque').show();
},
complete: function (jqXHR, textStatus) {
  $('#opaque').hide();
},

2.) Then we need to add the css styles in your css file:

#loadingDialog, .loading-dialog { width: 100%; height: 100%; background-image: url(images/bg_ajax-loader.gif); background-position: center; background-repeat: no-repeat; position: fixed; cursor: progress; border: 1px solid #000; filter: alpha(opacity=100); opacity: 1; }
#opaque { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2147483647; background-color: black; filter: alpha(opacity=40); opacity: 0.4; display: none; }

3.) And lastly don't forget to add the image bg_ajax-loader.gif under /Content/images folder.