Question

这是我的问题：在我的网页上，我有电子邮件的文本框和提交按钮，当用户点击提交按钮时发送了一封电子邮件。这样的过程需要花费一点时间，所以我想向用户显示带有加载面板的模态窗口在我给出模态以显示窗口的时间之后的事情是这个过程已经完成。

我的问题是如何在发生模态和回发的SetTimeout后关闭模态???

这是我的代码和帮助我的代码链接。 http://www.aspsnippets.com/Articles/Display-loading-progress-image-when-Page-Loads-or-does-PostBack-using-ASPNet.aspx

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

      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);
            __doPostBack("<%=btnSubmit.UniqueID %>", "");
             // How to close the modal after 200 sec are over and postback been execute 
        }



   Email:<asp:TextBox name="Email" ID="txtemail" ValidationGroup="Group" runat="server"  Width="330px"/>

                    <asp:RequiredFieldValidator ID="requiredFieldValidatorEmail" runat="server" ControlToValidate="txtemail"
                        Display="Dynamic" ErrorMessage="Req" ForeColor="Red" SetFocusOnError="True" ValidationGroup="Group"
                        CssClass="validationClass"></asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator ID="revEmail" runat="server" ErrorMessage="Please Enter Valid Email"
                        ValidationGroup="vgSubmit" ControlToValidate="txtEmail" CssClass="requiredFieldValidateStyle"
                        ForeColor="Red" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"> </asp:RegularExpressionValidator>
                              <asp:Button ID="btnSubmit" ValidationGroup="Group" runat="server" Text="Submit" OnClick="passwordSubmit_Click"   OnClientClick="ShowProgress();"/>
                              <div class="loading" align="center">
                                Loading. Please wait.<br />
                                <br />
                                <img src="Images/Layout/ajax-loader.gif" alt="" />
                              </div>
<style type="text/css">
       .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 #808080;
            width: 200px;
            height: 100px;
            display: none;
            position: fixed;
            background-color: White;
            z-index: 999;
        }
     </style>

返回代码：

 Protected Sub passwordSubmit_Click(ByVal sender As Object, ByVal e As EventArgs)
        If revEmail.IsValid Then
            Dim dba As New DBAccess
            Dim email As String = ""
            Dim password As String = ""

            Dim ds As DataSet = dba.GetForgotPasswordEmail(m_UserName, txtemail.Text, m_CompanyCode)
            If Not ds Is Nothing Then

                Dim dr As DataRow = ds.Tables(0).Rows(0)
                email = dr("Email")
                password = dr("Password")
                Dim fpMessage As New SendForgotEmailPassword
                fpMessage.SendForgotPasswordEmail(email, password)
                lblEmailSent.Text = "Email has been sent."
                lbToLoginPage.Visible = True

            Else
                lblEmailSent.Text = "No Such Email."
                lbToLoginPage.Visible = True
            End If
        Else
            lbToLoginPage.Visible = False
        End If
    End Sub

Answer 1

您应该为回发添加回调

function ShowProgress() {

        // I guess it shows your modal
        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);

        // Gets the request manager
        var requestManager = Sys.WebForms.PageRequestManager.getInstance();

        // Callback function will be called after __doPostBack
        function EndRequestHandler(sender, args) {
            // This will be executed after __doPostBack
            // Here's you should put your code to close modal!

            // Remove the request handler
            requestManager.remove_endRequest(EndRequestHandler);
        }

        // Tells the request manager we are adding a callback
        requestManager.add_endRequest(EndRequestHandler);

        __doPostBack("<%=btnSubmit.UniqueID %>", "");

    }

如何在SetTimeOut和回发发生后关闭模态

1 个答案: