javascript - DIVstyle=none，但div仍然显示(用于弹出处理图形)

Question

我遇到了 DIV 元素内的弹出处理图形的问题，并且无法消失。当需要时，图形会正确显示，但当我尝试让它不显示时，它仍然存在。

我正在使用 spinner 函数，如下所示: http://www.codeproject.com/Tips/701197/A-master-page-level-spinner-animation

所以，我的母版页中有 div 元素:

  <!--Content start-->
        <div id="content">
            <asp:ContentPlaceHolder ID="MainContent2" runat="server">

            </asp:ContentPlaceHolder>

            <div class="clr"></div>
            <div id="SpinnerContainer"></div> 
            <div id="Spinner" style="background:url(/images/loader.gif) no-repeat center #fff;"></div> 
        </div>
        <!--Content end-->

我的母版页中有一些 java 脚本，使其可见，如下所示:

 function ToggleSpinnerBlock(Visible) {
        var displayValue = Visible ? "block" : "none";
        document.getElementById("SpinnerContainer").style.display = displayValue;
        document.getElementById("Spinner").style.display = displayValue;

        var isIE = navigator.userAgent.indexOf('MSIE') > 0;
        if (Visible && isIE) {
            $('#Spinner').css("backgroundImage", "");
            setTimeout("AppendSpinnerImageForIE();", 10);
        }
    }

连接的 CSS 样式如下:

/* Loader spinner styles */
  div#SpinnerContainer
    {
        position: absolute;    
        display: none;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: #fff;
        opacity:0.4;
        filter:alpha(opacity=40); /* For IE8 and earlier */
        z-index: 1000; /* Important to set this */
    } 
 div#Spinner
    { 
        position: absolute;
        display: none;
        width:50px;
        height: 50px;
        top: 48%;
        left: 48%;            
        z-index:1001;
        overflow: auto;
    } 

在我的子表单中，我的按钮调用 JavaScript，如下所示:

                    <asp:Button ID="btnFilter"  ToolTip="Select to search for patients using the above filter criteria" runat="server" Text="Filter" 
                        onclick="btnFilter_Click" OnClientClick="return BeforePostBack()" CssClass="btnDownloadSearchClear"/>

这一切都很好 - 我按下按钮，我就得到了我的旋转器。太棒了。

但是，在我的代码中，我需要能够隐藏微调器。因此，在我的 C# 服务器代码中，我使用:

 Page.ClientScript.RegisterStartupScript(this.GetType(), "", "HideSpinner();", true);

它在我的子(主应用程序)页面中调用新的 javascript 函数，如下所示:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent2" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>

<script type="text/javascript">
    function BeforePostBack() {
        $('#PostBackResult').text('');
        ToggleSpinnerBlock(true);
        return true; //So that allow post back to server
    }
    function HideSpinner() {
        $('#PostBackResult').text('');
        HideSpinnerBlock(false);
        return true; //So that allow post back to server
    } 


</script>

然后调用母版页 javascript，如下所示:

    function HideSpinnerBlock(Visible) {
        var displayValue = Visible ? "block" : "none";
        document.getElementById("Spinner").style.display = 'none';
        document.getElementById("SpinnerContainer").style.display = 'none';

    } 

现在我 100% 知道 javascript HideSpinnerBlock 正在被调用(我已经发出警报，并通过 Firebug 放置了错误的代码来捕获它)，并且它正在被调用，但旋转器错误仍然在屏幕上。

有什么想法吗？

PS - 是的，我知道我的 HideSpinnerBlock 可以使用 False 设置调用 ToggleSpinnerBlock，但在失败后，我决定对其进行硬编码。

有什么想法吗？我正在为这个抓狂。

Answer 1

也许也可以尝试将背景设置为无。那就是你的旋转器所在的地方。您实际上应该创建一个具有以下属性的类...

.hideSpinner {

    display: none !important;
    background: none !important;
    background-image: none !important;
}

然后只需添加类...

var d = document.getElementById("Spinner");
d.className = d.className + " hideSpinner";