title: Show loading spinner on click of link button asp.net
body: <p>I am trying to use this code on a link button, but because it expects the use of a form it is not working. I wish to show the overlay div when I click the link button, so the user has a idea of the long the processing time of a function will be. I am trying to follow the example here at <a href="http://www.aspsnippets.com/demos/289/" rel="nofollow noreferrer">http://www.aspsnippets.com/demos/289/</a></p>
  
  <p>I believe the problem is with jquery because it expects a form submission when I just want it to show on the button click. Keep in mind I am doing this in a user control, so maybe it's related to page life cycle stuff as well, but because my link button is not in a form well, it's in the master page, it may not be the issue.</p>
  
  <pre><code>$('form').live("submit", function () {
      ShowProgress();
  });
  </code></pre>
  
  <p>This is my script code </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function ShowProgress() {
          setTimeout(function () {
              var modal = $('&lt;div /&gt;');
              modal.addClass("modal");
              $('body').append(modal);
              var loading = $(".loading");
              loading.show();
              var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
              var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
              loading.css({ top: top, left: left });
          }, 200);
      }
      $('form').live("submit", function () {
          ShowProgress();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>Syles </p>
  
  <pre><code>  &lt;style type="text/css"&gt;
  
  
      .modal
      {
          position: fixed;
          top: 0;
          left: 0;
          background-color: black;
          z-index: 99;
          opacity: 0.8;
          filter: alpha(opacity=80);
          -moz-opacity: 0.8;
          min-height: 100%;
          width: 100%;
      }
      .loading
      {
          font-family: Arial;
          font-size: 10pt;
          border: 5px solid #67CFF5;
          width: 200px;
          height: 100px;
          display: none;
          position: fixed;
          background-color: White;
          z-index: 999;
      }
   &lt;/style&gt;
  </code></pre>
  
  <p>My Html and button click </p>
  
  <pre><code>&lt;div class="loading" align="center"&gt;
      Loading. Please wait.&lt;br /&gt;
      &lt;br /&gt;
      &lt;img src="~/Images/slateloading.gif" alt="" /&gt;
  &lt;/div&gt;
  &lt;asp:LinkButton ID="lnkExport"  CausesValidation="false" style="margin-top: 5px;" on Height="60" OnClick="lnkExport_Click" ClientIDMode="Static" runat="server" Text=" &lt;i class='glyphicon glyphicon-open-file' &gt;&lt;/i&gt;&lt;br/&gt;Submit Case" CssClass="btn btn-info btn-dark-theme-negative pull-right" /&gt;
  </code></pre>
  
  <p>Then, in <code>page_load</code> I have this. I need the progress window to show when the <code>lnkexport</code> button is clicked.</p>
  
  <pre><code>if (!IsPostBack)
              {
                  string script = "$(document).ready(function () { $('[id*=lnkExport]').click(); });";
                   Page.ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);
              }
  </code></pre>