ajax实现样式更新,Ajax UpdateProgress功能演示

此功能，使用到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