<!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>
<style type="text/css">
#modalBackground
{
background-color: gray;
filter: alpha(opacity=70);
opacity: 0.7;
position: absolute;
top: 0px;
left: 0px;
}
#animationDialog
{
position: absolute;
border: solid 1px black;
color: Black;
background-color: #0099cc;
font-family: Arial;
font-size: 8pt;
font-weight: bold;
line-height: 30px;
height: 30px;
padding: 10px;
text-align: center;
}
</style>
<script type="text/C#" runat="server">
protected void Button1_Click(object sender, EventArgs e)
{
Thread.Sleep(5000);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div style="height: 2000px;">
</div>
<div style="height: 2000px;">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<%= DateTime.Now %>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<div id="modalBackground">
</div>
<div id="animationDialog">
<img src="loading.gif" alt="Loading" /><br />
加载中
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<script type="text/javascript" language="javascript">
function getClientBounds()
{
var clientWidth;
var clientHeight;
switch(Sys.Browser.agent) {
case Sys.Browser.InternetExplorer:
clientWidth = document.documentElement.clientWidth;
clientHeight = document.documentElement.clientHeight;
break;
case Sys.Browser.Safari:
clientWidth = window.innerWidth;
clientHeight = window.innerHeight;
break;
case Sys.Browser.Opera:
clientWidth = Math.min(window.innerWidth, document.body.clientWidth);
clientHeight = Math.min(window.innerHeight, document.body.clientHeight);
break;
default: // Sys.Browser.Firefox, etc.
clientWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
clientHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
break;
}
return new Sys.UI.Bounds(0, 0, clientWidth, clientHeight);
}
function resizeElements()
{
var clientBounds = getClientBounds();
var clientWidth = clientBounds.width;
var clientHeight = clientBounds.height;
var bg = $get("modalBackground");
bg.style.width = Math.max(Math.max(document.documentElement.scrollWidth, document.body.scrollWidth), clientWidth) + 'px';
bg.style.height = Math.max(Math.max(document.documentElement.scrollHeight, document.body.scrollHeight), clientHeight) + 'px';
var st=0;
if (document.body && document.body.scrollTop)
{
st=document.body.scrollTop;
}
if (document.documentElement && document.documentElement.scrollTop)
{
st=document.documentElement.scrollTop;
}
var scrollLeft = (clientWidth/2);
var scrollTop = (clientHeight/2+st);
var dialog = $get("animationDialog");
dialog.style.left = scrollLeft + "px";
dialog.style.top = scrollTop + "px";
}
$addHandler(window, "scroll", resizeElements);
$addHandler(window, "resize", resizeElements);
resizeElements();
</script>
</form>
</body>
</html>
