How to disable the background window

I want to disable the background window when clicking the button. In my project I am using update panel and progress bar. when I click the button the background window is fully visible= false. I want to disable the background window and the progress bar should be displayed. Here is the code:

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="fp_t012stk.aspx.vb" Inherits="fp_t012stk" title="Current Stock Report" %>

<%@ Register Assembly="CrystalDecisions.Web, Version=10.2.3600.0, Culture=neutral, PublicKeyToken=692fbea5521e1304"

    Namespace="CrystalDecisions.Web" TagPrefix="CR" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<asp:Content ID="Content1"  ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<script type="text/JavaScript" language="JavaScript">

function ShowProgress()

    {





   document.getElementById ('MainDiv').style.display='';

    document.getElementById ('MainDiv').style.visibility='visible';

    document.getElementById ('MainDiv').style.position='absolute';

    document.getElementById ('MainDiv').style.top='0px';

    document.getElementById ('MainDiv').style.left='0px';

    document.getElementById ('MainDiv').style.width= '100%';

    document.getElementById ('MainDiv').style.height= '100%';

    document.getElementById ('MainDiv').style.backgroundColor = "Gray";

    document.getElementById ('MainDiv').style.filter = "alpha(opacity=60)";

    document.getElementById ('MainDiv').style.opacity = "0.6";

    document.getElementById('<% Response.Write(UpdateProgress1.ClientID)%>').style.display = "inline";

    document.getElementById ('MainDiv').style.display='none';

    document.getElementById ('MainDiv').style.visibility='visible';

    document.getElementById ('MainDiv').style.top='0px';

    document.getElementById ('MainDiv').style.left='0px';

    document.getElementById ('MainDiv').style.width= '0px';

    document.getElementById ('MainDiv').style.height= '0px';



   }   

  </script>



 <div id="MainDiv">

 <asp:ScriptManager id="ScriptManager1" AsyncPostBackTimeout="0" runat="server">

    </asp:ScriptManager>



    <asp:UpdatePanel id="UpdatePanel1" runat="server">

        <contenttemplate>

&nbsp; <TABLE cellSpacing=0><TBODY><TR><TD colSpan=3>

<HR class="css_horizontalruleUp" />

<TABLE cellSpacing=0><TBODY><TR><TD align=right><asp:Label id="Label1" runat="server" CssClass="css_HeaderLabel" __designer:wfdid="w118" Text="Current Stock" Width="100px"></asp:Label></TD><TD><asp:Panel id="Panel1" runat="server" CssClass="css_panel" __designer:wfdid="w119" BackColor="White">&nbsp;<TABLE><TBODY><TR><TD align=right><asp:Label id="Label3" runat="server" CssClass="css_normalLabel" __designer:wfdid="w120" Text="*Product Family" Width="90px"></asp:Label></TD><TD style="WIDTH: 100px" align=left><asp:DropDownList id="droProdFamily" runat="server" CssClass="css_dropdown" __designer:wfdid="w121" Width="275px" AutoPostBack="True">

                                            </asp:DropDownList></TD><TD style="WIDTH: 148px" align=right><asp:Label id="Label5" runat="server" CssClass="css_normalLabel" __designer:wfdid="w122" Text="*Product:"></asp:Label></TD><TD align=left colSpan=5><asp:DropDownList id="droProduct" runat="server" CssClass="css_dropdown" __designer:wfdid="w123" Width="275px">

                                            </asp:DropDownList></TD></TR><TR><TD align=right><asp:Label id="Label7" runat="server" CssClass="css_normalLabel" __designer:wfdid="w124" Text="*Branch:" Width="1px"></asp:Label></TD><TD align=left><asp:DropDownList id="Drp_Branch" runat="server" CssClass="css_dropdown" __designer:wfdid="w125" Width="272px" AutoPostBack="True">

                                            </asp:DropDownList></TD><TD style="WIDTH: 148px" align=left></TD><TD align=left></TD><TD align=left></TD><TD align=left></TD><TD align=left></TD><TD align=left></TD></TR><TR><TD align=right><asp:Label id="Label4" runat="server" CssClass="css_normalLabel" __designer:wfdid="w126" Text="*Warehouse:" Width="90px"></asp:Label></TD><TD align=left><asp:DropDownList id="Drp_Ware_CD" runat="server" CssClass="css_dropdown" __designer:wfdid="w127" Width="275px" AutoPostBack="True">

                                            </asp:DropDownList></TD><TD style="WIDTH: 148px" align=right><asp:Label id="Label2" runat="server" CssClass="css_normalLabel" __designer:wfdid="w128" Text="*Stock Type:" Width="75px"></asp:Label></TD><TD align=left><asp:DropDownList id="Drp_Stk_Type" runat="server" CssClass="css_dropdown" __designer:wfdid="w129" Width="93px">

                                                <asp:ListItem>All</asp:ListItem>

                                                <asp:ListItem Value="G">Good</asp:ListItem>

                                                <asp:ListItem Value="D">Defective</asp:ListItem>

                                                <asp:ListItem Value="A">OOW Good</asp:ListItem>

                                                <asp:ListItem Value="B">OOW Defective</asp:ListItem>

                                            </asp:DropDownList></TD><TD align=left>&nbsp;<asp:Label id="Label8" runat="server" CssClass="css_normalLabel" __designer:wfdid="w130" Text=" Serial # Required ?:" Width="115px"></asp:Label></TD><TD align=left><asp:DropDownList id="Drp_Uslno_ID" runat="server" CssClass="css_dropdown" __designer:wfdid="w131">

                                                <asp:ListItem Value="N">No</asp:ListItem>

                                                <asp:ListItem Value="Y">Yes</asp:ListItem>

                                            </asp:DropDownList></TD><TD align=left>



                                            <asp:Button id="btnReport" runat="server" CssClass="css_button" __designer:wfdid="w132" Text="PRINT" OnClientClick="ShowProgress()"></asp:Button></TD><TD align=left><asp:Button id="btnExcel" runat="server" CssClass="css_button" __designer:wfdid="w133" Text="Excel"><开发者_Python百科;/asp:Button></TD></TR></TBODY></TABLE></asp:Panel> </TD><TD></TD></TR></TBODY></TABLE>

<HR class="css_horizontalruleDown" />

<asp:Label id="lblmsg" tabIndex=-1 runat="server" ForeColor="Red" Font-Bold="True" CssClass="css_MessageLabel" __designer:wfdid="w134"></asp:Label></TD></TR><TR><TD style="HEIGHT: 14px" colSpan=3></TD></TR><TR><TD align=left colSpan=3>&nbsp;<TABLE cellSpacing=0 cellPadding=0><TBODY><TR><TD><CR:CrystalReportViewer id="CrystalReportViewer1" runat="server" ReportSourceID="CrystalReportSource1" AutoDataBind="true" __designer:wfdid="w135" DisplayGroupTree="False" EnableDatabaseLogonPrompt="False" HasCrystalLogo="False" HasDrillUpButton="False" HasExportButton="False" HasGotoPageButton="False" HasPageNavigationButtons="False" HasSearchButton="False" HasToggleGroupTreeButton="False" HasViewList="False" HasZoomFactorList="False"></CR:CrystalReportViewer> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

</contenttemplate>

        <triggers>

<asp:PostBackTrigger ControlID="btnReport"></asp:PostBackTrigger>

<asp:PostBackTrigger ControlID="btnExcel"></asp:PostBackTrigger>

</triggers>

    </asp:UpdatePanel>

    <CR:CrystalReportSource ID="CrystalReportSource1" runat="server">

        <Report FileName="rp_t012stk.rpt">

        </Report>

    </CR:CrystalReportSource>

    <CR:CrystalReportPartsViewer ID="CrystalReportPartsViewer1" runat="server" AutoDataBind="true"

        ReportSourceID="CrystalReportSource1" />

 <br />



</div>

   <asp:UpdateProgress id="UpdateProgress1" AssociatedUpdatePanelID="UpdatePanel1" runat="server" DisplayAfter="0">

<progresstemplate>



<div id="Layer1">

<asp:Image id="Image1" runat="server" __designer:wfdid="w2" ImageUrl="~/images/ajax-loader2.gif"></asp:Image> <asp:Label id="lblProcess" runat="server" CssClass="css_ProcessLabel" __designer:wfdid="w3">Processing....</asp:Label> 

</div>

</progresstemplate>

    </asp:UpdateProgress>

    <br />

</asp:Content>

Thanks in advance

---

use this...

.AjaxLoaderInner
{
    position: absolute;
    top: 45%;
    left: 45%;
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: Black;
}
.AjaxLoaderOuter
{
    position: fixed;
    vertical-align: middle;
    text-align: center;
    z-index: 1000;
    top: 0px;
    left: 0px;
    background-color: Gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
    margin: 0px 0px 0px 0px;
    width: 100%;
    height: 100%;
    min-height: 100%;
    min-width: 100%;    
}

put into css file..

and use on aspx page like this...

<asp:UpdateProgress ID="upd" runat="server">
    <ProgressTemplate>
        <div class="AjaxLoaderOuter">
            <div class="AjaxLoaderInner" id="LoadingImg">
                <p>
                    Loading Please wait</p>
                <asp:Image ID="imgloading" runat="server" ImageUrl="~/App_Shared/Images/relLoading.gif" /><br />
            </div>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

---

You have to use <ajaxToolkit:ModalPopupExtender>, check this easy example here.