如何禁用背景窗口

Question

我想在單擊按鈕時禁用背景窗口。在我的項目中，我使用更新面板和進度條。當我點擊按鈕時，背景窗口完全可見= false。我想禁用背景窗口並顯示進度條。下面是代碼：

<%@ 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"></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> 

在此先感謝

Answer 1

使用本...

.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%;  
} 

投入css文件..

像這樣aspx頁面上使用..

<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> 

Answer 2

您必須使用<ajaxToolkit:ModalPopupExtender>，查看這個簡單的例子here。