如何从后面的代码中隐藏加载图像 div

Question

CSS：

    <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 #67CFF5;
        width: 200px;
        height: 100px;
        display: none;
        position: fixed;
        background-color: White;
        z-index: 999;
    }
</style>

JS：

<script type="text/javascript">
    function ShowProgress() {
        // alert("aa");
        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);
    }
</script>

HTML：

 <div class="loading" align="center" id="loader">
                Loading. Please wait.
                <br />
                <img id="abc" src="../../Images/loader.gif" alt="" />
            </div>
<div>
  <asp:UpdatePanel ID="UpdatePaneltab" runat="server" UpdateMode="Always">
        <ContentTemplate>
<asp:Button ID="btnSearch" runat="server" Text="Run" CssClass="btn-in"   OnClick="btnSearch_Click"  OnClientClick="ShowProgress()" />
</ContentTemplate>
<Triggers>
            <asp:PostBackTrigger ControlID="btnSearch" />
        </Triggers>
    </asp:UpdatePanel>

我正在使用上面的代码显示按钮单击时加载图像 div。但是我无法将它隐藏在按钮单击代码中的任何位置。在执行所有按钮单击代码后它会自动隐藏。我有 exporttoexcel功能，我想在我的这个功能开始执行之前隐藏它，因为一旦导出开始，就无法控制页面和代码。但是即使导出完成，加载图像也会持续显示。 目前我正在使用

ClientScript.RegisterStartupScript(this.GetType(), "hwa", "document.getElementById('loader').style.visibility = 'hidden';", true);

隐藏 div。

我无法找出问题所在。我是否缺少需要在代码中添加的内容。 有什么建议么 ？有任何想法吗？ 请帮帮我。我卡住了。

Answer 1

你应该把写一个javascript函数放在一个javascript文件或你的aspx文件中。

function HideLoader() {
    $(".loading").hide();
    $(".modal").hide();
}

那么你应该在你的启动脚本中调用这个函数：

ClientScript.RegisterStartupScript(this.GetType(), "hwa", "HideLoader();", true);

由于RegisterStartupScript的输出是在页面加载后写入页面，所以内联脚本没有被执行。

编辑：

您应该隐藏.modal div 和.loading div。我改变了javascript。您应该在 HideLoader javascript 函数中放置一个断点，看看它是否被调用。如果它被调用并且它没有隐藏 div，那么您将更容易解决问题。只需更正 js 函数以隐藏加载 div。如果它没有被调用，你应该专注于 RegisterStartupScript，看看如何让它调用你的函数。