title: Freeze background page while page is loading
body: <p>I want that if my textbox is empty then field validator show an error messeage and if textbox is not empty then page is frozen while loading on button click.</p>
  
  <p>ASPX Code:</p>
  
  <pre><code>&lt;%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
          CodeFile="Default.aspx.cs" Inherits="_Default" %&gt;
      &lt;asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"&gt;
      &lt;/asp:Content&gt;
      &lt;asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"&gt;
      &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
          &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;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
      &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;
      &lt;asp:Label ID="Label1" runat="server" Text="Roll No : "&gt;&lt;/asp:Label&gt;
      &lt;asp:TextBox ID="TextBox1" runat="server"&gt;&lt;/asp:TextBox&gt;
      &lt;asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
              ControlToValidate="TextBox1" ErrorMessage="*"&gt;&lt;/asp:RequiredFieldValidator&gt;
      &lt;br /&gt;
      &lt;br /&gt;
      &lt;asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" /&gt;
      &lt;div class="loading" align="center"&gt;
      Loading. Please wait.&lt;br /&gt;
      &lt;br /&gt;
      &lt;img src="loader.gif" alt="" /&gt;
      &lt;/div&gt;
      &lt;/asp:Content&gt;
  </code></pre>
  
  <p>I am using visual studio 2010 ASP.Net/C#</p>