DIV CSS 佈局教程網

PageRequestManager是ASP.Net AJax用來管理非同步ClIEnt的操作方式，前陣子為了避免網頁重覆送出的問題，和同事們討論之後，決定利用「蓋玻璃」的方式，替整個網頁加上一層透明的DIV，防止User重覆按下送出的動作。

因為整個網站是采用ASP.Net Ajax開發，所以大部份的資料更新動作都是透過update panel來執行；因此，在回到server前，AJax會先呼叫一次

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest()這個方法，等到update panel執行完成之後，會再呼叫一次

Sys.WebForms.PageRequestManager.getInstance().add_endRequest()，所以可以透過這二個方式來達到效果建立及取消。

以下是截自官方網站的范例：

<script language="Javascript" type="text/Javascript"> 
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);  
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);  
function BeginRequestHandler(sender, args)  
{  
    var elem = args.get_postBackElement();  
    ActivateAlertDiv('visible', 'AlertDiv', elem.value + ' processing...');  
}  
function EndRequestHandler(sender, args)  
{  
    ActivateAlertDiv('hidden', 'AlertDiv', '');  
}  
function ActivateAlertDiv(visstring, elem, msg)  
{  
    var adiv = $get(elem);  
    adiv.style.visibility = visstring;  
    adiv.innerHtml = msg;   
}  
</script> 

不過為了讓user一按下按鈕就無法動作，所以效果開始這段我是寫在button的onclIEntclick上面，再利用add_endRequest來取消效果。

1.先在網頁上放置一個div

<div id="messageElement" class="busybox" style="font-size: 16px; font-family: Arial, Helvetica, sans-serif;"> 
    <img alt="waiting" src="/App_Themes/images/indicator.gif" /> 
    Please wait a moment...  
</div> 

2.再來是Javascript的動作

先取到整個body的大小，然後把div放到跟body一樣大即可！

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);  
function EndRequestHandler(sender, args)  
{  
    showBusyContainer(false);  
}  
function showBusyContainer(show)  
{    
    if(show==true)  
    {  
        Sys.UI.DomElement.toggleCSSClass(document.body, "HiddenSelect");  
        var bodyWidth = jQuery("body").outerWidth();  
        var bodyHeight = Math.max(jQuery("body").outerHeight(), jQuery(window).height());  
        var boxHeight = jQuery(".busybox").outerHeight();  
        jQuery(".overlay").show()  
             .CSS({ width:bodyWidth, height:bodyHeight});  
        jQuery(".busybox").show()  
             .CSS({ left: (bodyWidth - jQuery(".busybox").width()) / 2, position:"absolute", top:bodyHeight / 2 - boxHeight });  
    }  
    else  
    {  
        jQuery(".overlay").hide();  
        jQuery(".busybox").hide();  
        jQuery("body").removeClass("HiddenSelect");  
    }  
}