此功能,使用到Ajax技术UpdateProgress来实现层遮罩效果,从下面的Style可以看到两个样式,一个底层和显法层。
Style
#progressBackgroundLayer
{
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
overflow: hidden;
padding: 0;
margin: 0;
background-color: #000;
filter: alpha(opacity=30);
opacity: 0.5;
z-index: 1000;
}
#processMessageLayer
{
position: fixed;
text-align: center;
width: 15%;
border: none;
padding: 5px;
background-color: #fff;
vertical-align: middle;
z-index: 1001;
top: 20%;
left: 4%;
}
接下来,还再实现一个取消功能:
CancelPostBack
function CancelPostBack() {
var objMan = Sys.WebForms.PageRequestManager.getInstance();
if (objMan.get_isInAsyncPostBack())
objMan.abortPostBack();
}
.aspx
页面中写上ScriptManager,UpdatePanel和主角UpdateProgress:
View Code
οnclick="Button1_Click" />
DisplayAfter="100" DynamicLayout="true">
Please wait...
为了效果,Insus.NET故意在Button1_Click把进行时间写长了一点:
System.Threading.Thread.Sleep(5000);
完整代码:
http://download.cnblogs.com/insus/Ajax/UpdateProgressDemo.rar