C# ASP.NET UpdateProgress不'；我没有出现

这只是一个测试页面，所以我可以看到工作指示器是什么样子，但是该死的UpdateProgress根本没有出现

该测试只是构建一个对象列表并填充listbox，而listbox中的项少于100项

<asp:UpdatePanel runat="server" ID="UpdatePanel">
    <ContentTemplate>
        <asp:Button runat="server" ID="TestButton" OnClick="TestButton_Click" CssClass="btn btn-primary" Text="Begin Test" />
        <asp:ListBox runat="server" ID="LicensesListBox" />
    </ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress runat="server" ID="UpdateProgress" DisplayAfter="10" AssociatedUpdatePanelID="UpdatePanel">
    <ProgressTemplate>
        <div id="modal">
            <div class="modal-content">
                <div class="header">
                    <h2>Working...</h2>
                </div>
                <div class="copy">
                    <p><i class="fas fa-spinner"></i></p>
                </div>
            </div>
            <div class="overlay"></div>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

这里有一把小提琴来或多或少地展示我的期望：

---

只要用这个替换你的UpdateProgress即可。功劳归于

请稍候。。。

您有一个CSS问题，让我们来解决它

首先：让我们以一种与CSS动画配合使用的方式渲染

asp:UpdateProgress

，通过使用

visibility

CSS属性而不是

display

，我们通过将控件的

DynamicLayout

属性设置为

false

来实现这一点

<asp:UpdateProgress runat="server" ID="UpdateProgress" DisplayAfter="10" AssociatedUpdatePanelID="UpdatePanel" DynamicLayout="false">
...
</asp:UpdateProgress>

对此（假设UpdateProgress是您的

asp:UpdateProgress

的ID）：

应该这样做

---

我必须同意，这有点不正常，我们依赖于UpdateProgress容器上WebForms动态设置的

aria hidden

属性，但是我不希望这种行为改变。

你能告诉我你是否找到了解决方案吗？@kblau发现bootstrap的CSS中的

#modal

规则导致了这个问题。将我的模式更改为其他模式，它可以正常工作。我很高兴您能让它正常工作

#modal {
    left: 50%;
    margin: -250px 0 0 -32%;
    opacity: 0;
    position: absolute;
    top: -50%;
    visibility: hidden;
    width: 65%;
    box-shadow: 0 3px 7px rgba(0,0,0,.25);
    box-sizing: border-box;
    transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out
}

    #modal:target {
        opacity: 1;
        top: 50%;
        visibility: visible
    }

    /* custom modal css */
    #modal .header {
        border-bottom: 1px solid #1ABC9C;
        border-radius: 5px 5px 0 0
    }

    #modal h2 {
        margin: 0;
    }

    #modal .copy, #modal .header {
        padding: 10px;
    }

.modal-content {
    position: relative;
    z-index: 20;
    border-radius: 5px;
    color: #fff
}

#modal .overlay {
    background-color: #000;
    background: rgba(0,0,0,.8);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10
}

/* spinner */
.copy i {
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

<asp:UpdateProgress ID="UpdateProgress" DynamicLayout="true" runat="server" AssociatedUpdatePanelID="UpdatePanel">
    <ProgressTemplate>
        <div class="progress">
           <img src="https://media.giphy.com/media/y1ZBcOGOOtlpC/giphy.gif" />&nbsp;please wait...
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

<asp:UpdateProgress runat="server" ID="UpdateProgress" DisplayAfter="10" AssociatedUpdatePanelID="UpdatePanel" DynamicLayout="false">
...
</asp:UpdateProgress>

#modal:target {
    opacity: 1;
    top: 50%;
    visibility: visible
}

#UpdateProgress[aria-hidden=false] #modal {
    opacity: 1;
    top: 50%;
    visibility: visible
}