title: ASP.NET MVC 3 Jquery Modal Popup - Display Loading Icon
body: <p>Folks,</p>
  
  <p>I have ASP.NET MVC 3 Application and I have the following JQuery script below to show modal pop up windows. The following script is able to show modal dialog. However, I would like to load loading icon while the modal dialog is opening. do you have any idea how can I do it?</p>
  
  <pre><code>&lt;%= Html.ActionLink("Details", "ProductShipping", "OnlineStore", new { ProductGUID = Html.Encode(Model.GUID) }, new { @class = "EditShippinglink", title = "Edit Product Shipping", data_dialog_id = "EditProductShipping", data_dialog_title = "Shipping Method" })%&gt;
  </code></pre>
  
  <p><strong>JQuery</strong></p>
  
  <pre><code>$(".EditShippinglink").live("click", function (e) {
              $.ajaxSetup({ cache: false });
              e.preventDefault();
              var $loading = $('&lt;img src="/Content/ajax-loader.gif" alt="loading" class="ui-loading-icon"&gt;');
              $("&lt;div&gt;&lt;/div&gt;")
                      .addClass("dialog")
                      .attr("id", $(this)
                      .attr("data-dialog-id"))
                      .appendTo("body")
                      .dialog({
                          title: $(this).attr("data-dialog-title"),
                          close: function () { $(this).remove() },
                          width: 900,
                          modal: true,
                          minHeight: 500,
                          show: 'fade',
                          hide: 'fade',
                          resizable: 'false'
                      })
                      .load(this.href);
          });
  </code></pre>