您的位置：首页 > 其它

loading 关机效果

2008-07-24 16:48 127 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航