blocks|key|506935|text|感谢Jaidev，非常方便的帖子！|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|506936|可能需要一段时间才能得到正确的css，所以为了简化其他所有人的解决方案，您只需要以下内容(用于updateprogress中间定位)：|506937|506938|+<div+style="position:absolute;+width:100%25;height:100%25;"></div>|blockquote|CODE|506939|506940|506941|对于图像：|506942|506943|+<img+style="position:relative;+top:45%25;"+/>|506944|506945|entityMap^0|0|H|0|0|0|1|1Q|0|0|0|0|0|1|17|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|10|8|@]|D|@]|E|$]]|$1|I|3|J|5|K|7|11|8|@$9|12|A|13|B|L]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|14|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|15|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|16|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|17|8|@]|D|@]|E|$]]|$1|R|3|S|5|K|7|18|8|@$9|19|A|1A|B|L]]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|V|$]]

<p><strong>Thanks Jaidev, Very handy post!</strong></p>

<p>It can take a while to get the css just right, so just to simplify the solution for everyone else, you only need the following (for updateprogress middle-positioning):</p>

<blockquote>
  <p><code>&lt;div style="position:absolute; width:100%;height:100%;"&gt;&lt;/div&gt;</code></p>
</blockquote>

<p>and for the image:</p>

<blockquote>
  <p><code>&lt;img style="position:relative; top:45%;" /&gt;</code></p>
</blockquote>


blocks|key|1602546|text|在div中使用此样式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1602547|style="position:absolute;visibility:visible;border:none;z-index:100;width:100%25;height:100%25;background:#999;filter:+alpha(opacity=80);-moz-opacity:.8;+opacity:.8;"|code-block|syntax|javascript|1602548|并在您的img中使用此样式：|1602549|style="top:48%25;+left:42%25;+position:relative;"|1602550|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>use this style in your div:</p>

<pre><code>style="position:absolute;visibility:visible;border:none;z-index:100;width:100%;height:100%;background:#999;filter: alpha(opacity=80);-moz-opacity:.8; opacity:.8;"
</code></pre>

<p>and use this style in your img:</p>

<pre><code>style="top:48%; left:42%; position:relative;"
</code></pre>


blocks|key|1602574|text|使用ModalPpoupExtender并将目标控件设置为更新进度|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1602575|<cc1:ModalPopupExtender+ID="ModalPopupExtender1"+TargetControlID="PageUpdateProgress"
++++++++++++PopupControlID="PageUpdateProgress"+BackgroundCssClass="modalback"+runat="server">
++++++++</cc1:ModalPopupExtender>|code-block|syntax|javascript|1602576|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Use ModalPpoupExtender and set the target control to the update progress</p>

<pre><code>&lt;cc1:ModalPopupExtender ID="ModalPopupExtender1" TargetControlID="PageUpdateProgress"
            PopupControlID="PageUpdateProgress" BackgroundCssClass="modalback" runat="server"&gt;
        &lt;/cc1:ModalPopupExtender&gt;
</code></pre>


blocks|key|4170960|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4170961|<asp:UpdateProgress+ID="UpdateProgress1"+runat="server">
++++<ProgressTemplate+>
++++++++<div+id="dvProgress"+runat="server"+style="position:absolute;+top:+300px;
+++++++++++++++++++++++++++++++++++++++++++++++++++left:+550px;+text-align:center;">
++++++++++++<asp:Image+ID="Image2"+runat="server"+Height="46px"+Width="47px"+
+++++++++++++++++++++++ImageUrl="~/App_Themes/Default/Images/wait_ax.gif"++/>
++++++++</div>
++++</ProgressTemplate>
</asp:UpdateProgress>|code-block|syntax|javascript|4170962|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try this:</p>

<pre><code>&lt;asp:UpdateProgress ID="UpdateProgress1" runat="server"&gt;
    &lt;ProgressTemplate &gt;
        &lt;div id="dvProgress" runat="server" style="position:absolute; top: 300px;
                                                   left: 550px; text-align:center;"&gt;
            &lt;asp:Image ID="Image2" runat="server" Height="46px" Width="47px" 
                       ImageUrl="~/App_Themes/Default/Images/wait_ax.gif"  /&gt;
        &lt;/div&gt;
    &lt;/ProgressTemplate&gt;
&lt;/asp:UpdateProgress&gt;
</code></pre>


blocks|key|4171002|text|将CSS属性设置为百分比。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4171003|在第二个div中：|4171004|4171005|设置背景图像:url(‘图像路径’)。|ordered-list-item|4171006|相应地设置顶部、左侧、高度、宽度；顶部=(100-高度)/2，左侧=(100-宽度)/2|4171007|4171008|在两个div中，检查z-index是否设置在其他内容之上。|4171009|在IE中工作...|4171010|<asp:UpdateProgress+ID="updateProgress"+runat="server"+DynamicLayout="true">
++++<ProgressTemplate>

++++++++++++<div+style="position:+fixed;+top:+0px;+bottom:+0px;+left:+0px;+right:+0px;+overflow:+hidden;+padding:+0;+margin:+0;+background-color:+#F0F0F0;+filter:+alpha(opacity=50);+opacity:+0.5;+z-index:+100000;"></div>

++++++++++++<div+style="position:+fixed;+top:+40%25;+left:+40%25;+height:20%25;+width:20%25;+z-index:+100001;++background-color:+#FFFFFF;+border:2px+solid+#000000;+background-image:+url('../../Images/ajax-loader-big.gif');+background-repeat:+no-repeat;+background-position:center;"></div>

++++++++</ProgressTemplate>
</asp:UpdateProgress>|code-block|syntax|javascript|4171011|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|X|8|@]|9|@]|A|$]]|$1|E|3|F|5|G|7|Y|8|@]|9|@]|A|$]]|$1|H|3|I|5|G|7|Z|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|10|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|11|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|12|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|13|8|@]|9|@]|A|$R|S]]|$1|T|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|U|$]]

<p>Set your CSS properties as percentages. </p>

<p>In the second div:</p>

<ol>
<li>Set background-image: url('[Path to your image]').</li>
<li>Set top, left, height, width accordingly; top = (100-height)/2, left = (100-width)/2</li>
</ol>

<p>In both divs, check the z-index is set above other content.</p>

<p>Works in IE...</p>

<pre><code>&lt;asp:UpdateProgress ID="updateProgress" runat="server" DynamicLayout="true"&gt;
    &lt;ProgressTemplate&gt;

            &lt;div style="position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; overflow: hidden; padding: 0; margin: 0; background-color: #F0F0F0; filter: alpha(opacity=50); opacity: 0.5; z-index: 100000;"&gt;&lt;/div&gt;

            &lt;div style="position: fixed; top: 40%; left: 40%; height:20%; width:20%; z-index: 100001;  background-color: #FFFFFF; border:2px solid #000000; background-image: url('../../Images/ajax-loader-big.gif'); background-repeat: no-repeat; background-position:center;"&gt;&lt;/div&gt;

        &lt;/ProgressTemplate&gt;
&lt;/asp:UpdateProgress&gt;
</code></pre>


blocks|key|1602629|text|我在我的项目中使用了这个代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1602630|ASPX：|1602631|<asp:UpdateProgress+ID="UpdateProgress1"+runat="server"+AssociatedUpdatePanelID="UpdatePanel1"+DisplayAfter="100"+DynamicLayout="true"+>
++<ProgressTemplate>
++++<div+class="update">
++++</div>
++</ProgressTemplate>
</asp:UpdateProgress>|code-block|syntax|javascript|1602632|CSS：|1602633|/*+UPDATEPANEL+PROGRESS+:+masque+lors+du+chargement+des+résultats+*/
.update
{
position:+fixed;
top:+0px;
left:+0px;
min-height:+100%25;
min-width:+100%25;
background-image:+url("Images/Loading.gif");
background-position:center+center;
background-repeat:no-repeat;
background-color:+#e4e4e6;
z-index:+500+!important;
opacity:+0.8;
overflow:+hidden;
}|1602634|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I used in my project this code.</p>

<p>The ASPX :</p>

<pre><code>&lt;asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="100" DynamicLayout="true" &gt;
  &lt;ProgressTemplate&gt;
    &lt;div class="update"&gt;
    &lt;/div&gt;
  &lt;/ProgressTemplate&gt;
&lt;/asp:UpdateProgress&gt;
</code></pre>

<p>The CSS :</p>

<pre><code>/* UPDATEPANEL PROGRESS : masque lors du chargement des résultats */
.update
{
position: fixed;
top: 0px;
left: 0px;
min-height: 100%;
min-width: 100%;
background-image: url("Images/Loading.gif");
background-position:center center;
background-repeat:no-repeat;
background-color: #e4e4e6;
z-index: 500 !important;
opacity: 0.8;
overflow: hidden;
}
</code></pre>


blocks|key|1604417|text|你也可以使用UpdatePanelAnimationExtender，i.g。停用触发提交事件的控件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1604418|entityMap^0|6|S|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>You could also use <code>UpdatePanelAnimationExtender</code>, i.g. to deactivate control which fired a submit event.</p>


blocks|key|2573959|text|我试过这段代码，它可以在IE和Chrome中运行：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2573960|++++++++<asp:UpdateProgress+runat="server">
++++++++++++<ProgressTemplate>
++++++++++++++++<div+class="Modal">
++++++++++++++++++++<img+src="/img/load.gif"+class="Loadin"+/>
++++++++++++++++</div>
++++++++++++++++<style>
++++++++++++++++++++.Modal+{
++++++++++++++++++++++++position:+fixed;
++++++++++++++++++++++++width:+100%25;
++++++++++++++++++++++++height:+100%25;
++++++++++++++++++++++++background-color:+rgba(6,+0,+137,+0.40);
++++++++++++++++++++++++top:+0;
++++++++++++++++++++++++left:+0;
++++++++++++++++++++++++right:+0;
++++++++++++++++++++++++bottom:+0;
++++++++++++++++++++}
++++++++++++++++++++.Loadin+{
++++++++++++++++++++++++position:+relative;
++++++++++++++++++++++++top:+50%25;
++++++++++++++++++++++++right:+50%25;
++++++++++++++++++++}
++++++++++++++++</style>
++++++++++++</ProgressTemplate>
++++++++</asp:UpdateProgress>|code-block|syntax|javascript|2573961|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I  have tried this code and it works in IE and Chrome:</p>

<pre><code>        &lt;asp:UpdateProgress runat="server"&gt;
            &lt;ProgressTemplate&gt;
                &lt;div class="Modal"&gt;
                    &lt;img src="/img/load.gif" class="Loadin" /&gt;
                &lt;/div&gt;
                &lt;style&gt;
                    .Modal {
                        position: fixed;
                        width: 100%;
                        height: 100%;
                        background-color: rgba(6, 0, 137, 0.40);
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                    }
                    .Loadin {
                        position: relative;
                        top: 50%;
                        right: 50%;
                    }
                &lt;/style&gt;
            &lt;/ProgressTemplate&gt;
        &lt;/asp:UpdateProgress&gt;
</code></pre>


<p>I am using the Ajax UpdateProgress control. Though it is working just as I expected it to work, I want it to appear at the center of the page. How do I do that</p>

<pre><code>&lt;asp:UpdateProgress runat="server"
      id="PageUpdateProgress" DisplayAfter=0
      DynamicLayout=true&gt;
   &lt;ProgressTemplate&gt;
      &lt;div&gt;
         &lt;img src="../Images/load.gif" /&gt;           
     &lt;/div&gt;
   &lt;/ProgressTemplate&gt;
&lt;/asp:UpdateProgress&gt;
</code></pre>


Display Ajax UpdateProgress in the middle of the Page

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我使用的是Ajax UpdateProgress控件。虽然它和我预期的一样工作，但我希望它出现在页面的中心。我该怎么做呢？<asp:UpdateProgress runat="server"      id="PageUpdateProgress" DisplayAfter=0      DynamicLayout=true>   <ProgressTemplate>      <div>    

问在页面中间显示Ajax UpdateProgress
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在页面中间显示Ajax UpdateProgressEN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在页面中间显示Ajax UpdateProgress
EN