关于遮挡层?

Question

由于后台的数据处理量相当大,点击按钮后处理时间很长,
我想实现点击处理按钮后弹出一页面,等到处理完毕后再将弹出的页面关闭,请问如何实现?

Answer 1

最简单的是微软的AJAX控件
UpdateProgress就是干这件事的!!

Answer 2

代码基本是自动生成的!
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0">
                <ProgressTemplate>
                    <div style="width: 200px; height: 50px; background-color: #cccccc;">
                        正在处理数据.....
                    </div>
                </ProgressTemplate>
            </asp:UpdateProgress>
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>    protected void Button1_Click(object sender, EventArgs e)
    {
        for (int i = 0; i < 100000000; i++)
        {
        }
    }为了使页面刷新别太快,在Button的click下,做空循环,
楼主可点击Button,看到"正在处理数据....."的层,回发结束后自动消失,
可以将这个层叠放在中央!!

Answer 3

1楼正解。。 UpdateProgress就是用于在更新UpdatePanel中的数据时 显示提示信息的。。
不需要你写任何代码。 关于层的显示和隐藏 都是自动的 

Answer 4

用微软提供的ajaxcontroltoolkit可以很方便实现不过性能方面不知道怎么说。。

Answer 5

 function $(id) { return document.getElementById(id); }
    var Mask = {
        tempValue:{mask:null,msgMask:null},
        DocBody:function(){return document.compatMode == "CSS1Compat" ? document.documentElement :document.body},
        Width: function() { return this.DocBody().scrollWidth > this.DocBody().offsetWidth ? this.DocBody().scrollWidth : this.DocBody().offsetWidth; }, /*當前頁面的寬度(包括需要滚动的区域) */
        Height: function() { return this.DocBody().scrollHeight > this.DocBody().offsetHeight ? this.DocBody().scrollHeight : this.DocBody().offsetHeight; }, /*當前頁面的高度(包括需要滚动的区域)*/
        MiddleWidth: function() { return this.DocBody().offsetWidth / 2; }, /*獲取水平居中位置*/
        MiddleHeight: function() { return this.DocBody().offsetHeight / 2 }, /*垂直居中位置 */
        tempValue:{mask:null,msgMask:null},
        createMask: function(posOptions) {/*創建遮罩層*/
if(this.tempValue.mask == null){
var _mask = document.createElement("div");
_mask.id = "mask";
var height = posOptions.height ? posOptions.height : this.Height(); //遮罩层的高度
var width = posOptions.width ? posOptions.width : this.Width();//遮罩层的寬度
var maskTop = posOptions.maskTop ? posOptions.maskTop : 0;
var maskLeft = posOptions.maskLeft ? posOptions.maskLeft : 0; 
_mask.style.cssText = "display:block;position:absolute;z-index:2000;background-color:" + (posOptions.maskBgColor ? posOptions.maskBgColor : "#000") + ";width:" + width + "px;height:" + height + "px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);left:"+maskLeft+"px;top:"+maskTop+"px";
document.body.appendChild(_mask);
this.tempValue.mask = _mask;
}
        },
        createMsgMask: function(msg,posOptions) {/*創建信息提示層*/
if(this.tempValue.msgMask == null){
var _msgMask = document.createElement("div");
_msgMask.id = "maskmsg";
var msgTop = posOptions.msgTop ? posOptions.msgTop : this.MiddleHeight(); //信息提示層距离页面顶端的位置
var msgLeft = posOptions.msgLeft ? posOptions.msgLeft : this.MiddleWidth(); //信息提示層距离页面顶端的位置
_msgMask.style.cssText = "display:block;position:absolute;z-index:2001;color:red;text-align:center;ackground-color:#fff;font-size:9pt;top:" + msgTop + "px;left:" + msgLeft + "px;"; //background-image:url(../../Images/loading.gif);background-repeat:no-repeat
_msgMask.innerHTML = msg;
document.body.appendChild(_msgMask);
this.tempValue.msgMask = _msgMask;
            }
        },
        initMask: function(msg, posOptions) {
 var isShowMask = posOptions.isShowMask ? posOptions.isShowMask : true;//默認顯示遮罩層
 this.createMask(posOptions);
 this.createMsgMask(msg,posOptions);
 if(isShowMask){
this.tempValue.mask.style.display = "block";
this.tempValue.msgMask.style.display = "block";
 }
 else{
this.tempValue.msgMask.style.display = "block";
this.tempValue.mask.style.display = "none";
 }
 
        },
        /*
        顯示狀態信息
        isShow :是否顯示   必選
        msg :要顯示的信息 必選
        posOptions :可選
        posOptions.maskBgColor : 遮罩層的背景色
        posOptions.maskTop : --遮罩层距离页面顶端的位置
        posOptions.maskLeft : --遮罩层距离页面左端的位置
        posOptions.width : --寬度
        posOptions.height : --高度
        posOptions.msgTop : --信息提示層距离页面顶端的位置
        posOptions.msgLeft : --信息提示層距离页面顶端的位置
        posOptions.isShowMask : -- 是否顯示遮罩層 可選 默認為顯示
        調用示例 :Mask.showStatusMessage(true,"加載中,請稍候...",{maskBgColor:"#fff",maskTop:0,maskLeft:0,width:800,height:600,msgTop:200,msgLeft:400})
        */
        showStatusMessage: function(isShow,msg, posOptions) {
            if (isShow) { this.initMask(msg, posOptions); }
            else {
                this.tempValue.mask.style.display = "none";
                this.tempValue.msgMask.style.display = "none";
            }
        },
        /*
        延緩提交,顯示狀態信息
        posOptions.seconds : 延緩時間 單位毫秒 
        */
        showMask: function(btn, msg,posOptions) {
            this.showStatusMessage(true, msg, posOptions);
            window.setTimeout(function() { $(btn).click(); }, posOptions.seconds ? posOptions.seconds : 1000 )
        }
    }
    window.onload = function(){
    
        if($("btnCheck")){
            $("btnCheck").attachEvent("onclick",function(){Mask.showMask("Button1","數據正在提交中,請稍候...",{seconds:5000})})
        }
    }<input type="button" value="提交" id="btnCheck" />
        <asp:Button ID="Button1" runat="server" Text="Button1" OnClick="Button1_Click"  style="display:none"/>