在UpdatePanel里使用ModalPopupExtender

转自:http://www.cnblogs.com/JeffreyZhao/archive/2007/03/22/683434.html

首先，我们先在页面上随意放一个UpdatePanel和UpdateProgress，里面的内容都非常简单，如下：

 

<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="animated_loading.gif" alt="Loading" />
            Working on your request
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

 

在UpdateProgres中，我们放置一个id为modalBackground的div作为Modal背景，还有一个id为animationDialog的div，这才是真正用作UpdateProgress提示的内容。

　　然后，我们在页面上先准备一些稳定的CSS Style，如下：

 

CSS
html
{
    font-zize : 10pt;
    font-family : Verdana;
}
#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 : #ffffae;
    font-family : Arial;
    font-size : 8pt;
    font-weight : bold;
    line-height : 30px;
    height : 30px;
    padding-left : 5px;
    padding-right : 5px;
}

接着就是最为关键的JavaScript代码了，它有两个作用，一是用于调节Modal背景的尺寸，二是调整animationDialog的位置（在这里我就将其固定在左上角），如下：

 

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 scrollLeft = (document.documentElement.scrollLeft ?
            document.documentElement.scrollLeft : document.body.scrollLeft);
    var scrollTop = (document.documentElement.scrollTop ?
            document.documentElement.scrollTop : document.body.scrollTop);    
    var dialog = $get("animationDialog");
    dialog.style.left = scrollLeft + "px";
    dialog.style.top = scrollTop + "px";
}

$addHandler(window, "scroll", resizeElements);
$addHandler(window, "resize", resizeElements);
resizeElements();

 

resizeElements方法的作用就是调节元素尺寸和位置。但是从获得Modal背景尺寸的工作中就可以发现，世界上存在那么多不同的浏览器实现有时真的是一件让人痛苦的事情。getClientBounds方法的作用是获得浏览器可视区域的大小，这段实现是从AjaxControlTookit中的Common.js中提取出来的。然后对元素的位置和大小进行设置的方式相信大家能够轻松地看明白，仔细想想也就可以理解DOM元素各个属性的具体含义了。最后，我们会在window的resize和scroll事件中调整DOM元素的属性——这是显而易见的。

　　这个示例的效果如下：

以上就是Modal UpdateProgress实现方式了，朋友们可以尝试着移动滚动条，此时UpdateProgress会停留在左上角——可惜延迟是不可避免的。