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

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 %>", "");

    }