updateprogress 实现层遮罩效果

最新推荐文章于 2021-07-16 08:38:12 发布

转载最新推荐文章于 2021-07-16 08:38:12 发布 · 2.4k 阅读

文章标签：

#textbox #button #server #microsoft #asp #filter

C# 专栏收录该内容

52 篇文章

订阅专栏

本文介绍了一种将遮罩层与基础Ajax控件封装到用户控件的方法，以实现页面更新时显示加载提示。通过使用UpdateProgress控件，结合自定义的样式和脚本来控制遮罩层的显示与隐藏。

转自：http://www.cnblogs.com/losingrose/articles/952490.html

遮罩层与基础ajax控件已经封装在一个用户控件，使用方便。
使用的页面的代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Register Src="webtools/AjaxSetup.ascx" TagName="AjaxSetup" TagPrefix="uc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <uc1:AjaxSetup ID="AjaxSetup1" runat="server" /> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /> </ContentTemplate> </asp:UpdatePanel> </form> </body> </html>
Button1_Click执行的为一个处理事件，我使用一个循环做的测试：
protected void Button1_Click(object sender, EventArgs e) { long start = DateTime.Now.Ticks; for (int i = 0; i < 1000000000; i++) { ; } TextBox1.Text = (DateTime.Now.Ticks - start).ToString(); }

关键的用户控件代码如下：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="AjaxSetup.ascx.cs" Inherits="webtools_AjaxSetup" %> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">#showBox { text-align: center; position: absolute; left: 0; top: 0; z-index: 99; width: 100%; height: 100%; } #msleft { position: absolute; left: 0; top: 0; z-index: 1002; width: 100%; height: 100%; } #alphaBox { position: absolute; left: 0; top: 0; z-index: 1000; width: 100%; height: 100%; background: #000; filter:alpha(opacity=30); /* IE */ opacity: 0.6; /* 支持CSS3的浏览器（FF 1.5也支持）*/ -moz-opacity: 0.6; /* Moz + FF */ } #content { color: #416f02; margin: 0 auto; margin-top: 220px; width: 240px; height: 60px; border: 1px solid #3C3C3C; background-color: #fff; } #content a { color: #416f02;text-Decoration:none; } #content a:hover { color: #c00; } .h1 { font-size: 14px; color: #c00; text-align: center; } .intro{ color: #c27006; font-size: 12px; text-align: center;} .close { text-align: right; height: 20px; margin: 20px 20px 0 0; }</style> <asp:UpdateProgress ID="UpdateProgress1" runat="server"> <ProgressTemplate> <div id="showBox" style="display:none;" mce_style="display:none;"> <div id="msleft"> <div id="content"> <span class="h1"><strong>数据处理中</strong></span> <br /> <span style="text-align: center;" mce_style="text-align: center;"><img src="<%=url %>images/loading.gif" /></span> <br /> <span class="intro">技术支持：<a href="http://losingrose.cnblogs.com" mce_href="http://losingrose.cnblogs.com" target="_blank">losingrose.cnblogs.com</a></span> </div> </div> <div id="alphaBox"></div> </div> <mce:script type="text/javascript"></mce:script> </ProgressTemplate> </asp:UpdateProgress>