UpdateProgress div定位

Question

当网格加载时，我试图在网格视图的顶部显示一个div。

我是这样放置我的UpdateProgress、UpdatePanel和GridView的：

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdtPnlRefList" >
        <ProgressTemplate>
            <div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
                <span style="border-width: 0px; position: fixed; padding: 50px; background-color: #FFFFFF; font-size: 36px; left: 40%; top: 40%;">Loading ...</span>
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
    <asp:UpdatePanel ID="UpdtPnlRefList" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
                <asp:GridView>
                       ......
                </asp:GridView>
               ...

我使用了另一个问题中的ProgressTemplate代码，但是这个代码使整个页面变灰，但我只需要使我的网格变灰。

这有可能吗？

Answer 1

我以前通过使用Ajax Control Toolkit的UpdatePanelAnimationExtender控件就实现了这一点。

<ajaxToolkit:UpdatePanelAnimationExtender ID="UpdatePanelAnimationExtender1" runat="server" TargetControlID="YourUpdatePanel">
<Animations>
    <OnUpdating>
        <Sequence>
            <ScriptAction Script="UpdatePanel_OnUpdating(updatePanelClientID, divToOverlayClientID);" />
            <Parallel duration="0">
                <FadeOut minimumOpacity=".5" />
            </Parallel>
        </Sequence>
    </OnUpdating>
    <OnUpdated>
        <Sequence>
            <Parallel duration="0" >
                <FadeIn minimumOpacity=".5" />
                <ScriptAction Script="UpdatePanel_OnUpdated(divToOverlayClientID);" />
            </Parallel>
        </Sequence>
    </OnUpdated>
</Animations>

​

确保在加载时设置了两个必需的ClientID，如下所示：

<script type="text/javascript">
var updatePanelClientID = '<%=YourUpdatePanel.ClientID %>';
var divToOverlayClientID = '<%=divUpdateProgress.ClientID %>';
</script>

我的div包含以下内容：

<div id="divUpdateProgress" runat="server" align="center" style="display: none; height: 40px; width: 200px; text-align: center; vertical-align: middle;">
<asp:Image ID="imgProgress" runat="server" ImageUrl="~/images/common/waitspin.gif" />
</div>

最后一块拼图是由UpdatePanelAnimationExtender调用的一对JS函数。它们看起来像这样：

function UpdatePanel_OnUpdating(updatePanelClientID, divClientID) {
// Displays a div over an updating UpdatePanel 
// Get the update progress div 
var divUpdateProgress = $get(divClientID);
// Make it visible 
divUpdateProgress.style.display = '';
// Get the UpdatePanel element 
var pnlUpdatePanel = $get(updatePanelClientID);
// Get the bounds of both the UpdatePanel and the progress div 
var pnlUpdatePanelBounds = Sys.UI.DomElement.getBounds(pnlUpdatePanel);
var divUpdateProgressBounds = Sys.UI.DomElement.getBounds(divUpdateProgress);
// Work out where to position the element (the centre of the UpdatePanel) 
var x = pnlUpdatePanelBounds.x + Math.round(pnlUpdatePanelBounds.width / 2) - Math.round(divUpdateProgressBounds.width / 2);
var y = pnlUpdatePanelBounds.y + Math.round(pnlUpdatePanelBounds.height / 2) - Math.round(divUpdateProgressBounds.height / 2);
// Set the progress element to this position 
Sys.UI.DomElement.setLocation(divUpdateProgress, x, y);
}

function UpdatePanel_OnUpdated(divClientID) {
// Related to UpdatePanel_OnUpdating, above. Hides the div once the UpdatePanel has been updated
$get(divClientID).style.display = 'none';
}

这段代码最初是在大约10年前编写的，但我刚刚在一个遗留项目中成功地重用了它。

Answer 2

<asp:GridView>
    <div style="position: relative;">

        Code goes here

        <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdtPnlRefList" >
            <ProgressTemplate>
                <div style="position: absolute; display: table; width: 100%; text-align: center; top: 0; right: 0; left: 0; bottom: 0; z-index: 9999999; background-color: rgba(255,255,255,0.7);">
                    <span style="border-width: 0px; padding: 50px; font-size: 36px; display: table-cell"; vertical-align: middle;>Loading ...</span>
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
    </div>
</asp:GridView>

将<ProgressTemplate></ProgressTemplate>放在<asp:GridView></asp:GridView>标记内。并为<div>提供position: relative;，并为<ProgressTemplate></ProgressTemplate>内的div提供position: absolute;。

不要使用opacity，因为它适用于整个标记和其中的所有内容。除非这正是你想要的。我使用了rgba(255,255,255,0.7);，它只会将背景颜色的不透明度降低到70%。

我通过添加display: table-cell"; vertical-align: middle;和将display: table;添加到父标记，使<span>Loading ...</span>垂直居中。

对于这一切，建议使用单独的样式表。=)

希望这能有所帮助。

这是一个美好的一天，CODE =)