如何在更新面板中使用ajax和jquery显示带有进度条的弹出窗口

Question

我试图使用jQuery，带有进度条的ajax updateprocess显示模式弹出。 我俩都不擅长。 我在谷歌搜索，并得到了一些例子。 此代码在没有updatepanel的情况下有效。 请帮助我使用updatepanel处理此代码。

------------------没有updatepanel的代码--------------

  <style type="text/css">
.modal
{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
     background-color: transparent;
    opacity: 0.8;
    filter: alpha(opacity=90);
    -moz-opacity: 0.8;
    min-height: 100%;
    width: 100%;
}
.loading
{
    font-family: Arial;
    font-size: 10pt;


    position: fixed;
    background-color: transparent;
    z-index: 999;
}

  <script type="text/javascript">
function ShowProgress() {
    setTimeout(function () {
        var modal = $('<div />');
        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);
}

    <asp:Button ID="btnSubmit" onclick="btnInvoke_Click" OnClientClick="ShowProgress()"
                 runat="server" Text="Submit Time" Width="170px" />

                 <div class="loading" align="center" style="display:none">
                     <img src="images/a1.gif" alt="" />
                 </div>

---------------带有更新面板--------------

  <asp:UpdateProgress ID="updProgress" runat="server">
        <ProgressTemplate>
        <div class="loading" align="center" style="display:none">
                     <img src="images/a1.gif" alt="" />
                 </div>    
        </ProgressTemplate>
    </asp:UpdateProgress>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Label ID="lblText" runat="server" Text=""></asp:Label>
            <br />

            <asp:Button ID="btnInvoke" runat="server" Text="Click" OnClientClick="ShowProgress()"
                onclick="btnInvoke_Click"  />

        </ContentTemplate>
    </asp:UpdatePanel>

当我使用updatepanel时，如何关闭此弹出窗口和loader。请帮助我编写该jQuery。

请通过updatepanel中带有进度条的弹出窗口或通过其他任何方式来提出一个很好的例子。

Answer 1

</asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers> 
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"/>
</Triggers>
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" 
 AssociatedUpdatePanelID="UpdatePanel1" runat="server">

  Update in Progress……..

 </ProgressTemplate>
  </asp:UpdateProgress>
 <asp:Button ID="Button1" runat="server" 
 OnClick="Button1_Click" Text="Button" />