Css UpdateProgress div定位
加载网格时,我试图在网格视图顶部显示一个div 这是我放置UpdateProgress、UpdatePanel和GridView的方式:Css UpdateProgress div定位,css,asp.net,Css,Asp.net,加载网格时,我试图在网格视图顶部显示一个div 这是我放置UpdateProgress、UpdatePanel和GridView的方式: <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdtPnlRefList" > <ProgressTemplate> <div style="position: fixed;
<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代码,但我不知道该代码会使整个页面变灰,但我只需要将网格变灰
这可能吗?
<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>
代码在这里
加载。。。
将
放在
标签内。
并给
一个位置:相对
和
内的div
位置:绝对代码>
不要使用opacity
,因为它适用于整个标记和其中的所有内容。除非那正是你想要的。
我使用了一个rgba(255255,0.7)代码>只会将背景色的不透明度降低到70%
通过添加display:table单元格;垂直对齐:中间;
并将display:table;
添加到父标记,我已将加载…
垂直居中
建议对所有这些使用单独的样式表。=)
希望这能有所帮助
对code
=)来说,这是一个美好的一天。过去,我通过使用的UpdatePaneAnimationExtender控件实现了这一点
<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>
这段代码最初是大约10年前编写的,但我刚刚在一个遗留项目中成功地重用了它。感谢您的回答,但是这不起作用,因为它显示了错误“Type”System.Web.UI.WebControls.GridView“没有名为“div”的公共属性。“我确实更新了一点代码。是否包含
标记?是的,我尝试过,但问题是GridView控件不允许在其中添加这些控件。如果你已经测试过并且成功了,请告诉我。
<script type="text/javascript">
var updatePanelClientID = '<%=YourUpdatePanel.ClientID %>';
var divToOverlayClientID = '<%=divUpdateProgress.ClientID %>';
</script>
<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>
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';
}