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">

为了效果，Insus.NET故意在Button1_Click把进行时间写长了一点：

System.Threading.Thread.Sleep(5000);

完整代码：

http://download.cnblogs.com/insus/Ajax/UpdateProgressDemo.rar

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

免费搭建微信查券返利机器人来轻松赚佣金