.net web页面点击按钮运行时屏蔽所有按钮的问题

在做一个OA管理系统，有个菜单界面，有很多按钮，其中有个下载数据库数据的按钮，因为数据量大，并且要把数据下载并写到excel中，所以点击此按钮后的执行时间较长，这个时候客户因为不耐烦，重新点击了这个下载按钮，或者点击了其他按钮，这个时候就会出现数据错误，或者因为计算量大，使整个IE瘫痪的现象，所以我想实现这样的效果，在点击按钮时，屏蔽其他所有按钮，最好是显示出个进度条，后面的页面屏蔽，等到进度条到100%的时候就取消屏蔽。
PS：屏蔽的效果，就是像AJAX中ModalPopupExtender弹出的时候那种效果。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

锁屏，但进度条这个方法不行，参考代码如下。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript锁屏</title>
<style type="text/css">
body {
    font-size:12px
}
#Screen {
    position:absolute;
    z-index: 9998;
    top: 0px;
    left: 0px;
    background: #000000;
    display: none;
    filter: alpha(Opacity=50);
}
#Message {
    position: absolute;
    z-index: 9999;
    top: 180px;
    left: 340px;
    display: none;
}
</style>
<script language="javascript">
// 获取宽度
function getWidth()
{
    var strWidth,clientWidth,bodyWidth;
    clientWidth = document.documentElement.clientWidth;
    bodyWidth = document.body.clientWidth;
    if(bodyWidth > clientWidth){
        strWidth = bodyWidth + 20;
    } else {
        strWidth = clientWidth;
    }
    return strWidth;
}
//获取高度
function getHeight()
{
    var strHeight,clientHeight,bodyHeight;
    clientHeight = document.documentElement.clientHeight;
    bodyHeight = document.body.clientHeight;
    if(bodyHeight > clientHeight){
        strHeight = bodyHeight + 30;
    } else {
        strHeight = clientHeight;
    }
    return strHeight;
}
// 锁屏
function showScreen()
{
    var Element = document.getElementById('Message');
    var Elements = document.getElementById('Screen');
    Elements.style.width = getWidth();
    Elements.style.height = getHeight();
    Element.style.display = 'block';
    Elements.style.display = 'block';
}
//解屏
function hideScreen()
{
    var Element = document.getElementById('Message');
    var Elements = document.getElementById('Screen');
    Element.style.display = 'none';
    Elements.style.display = 'none';
}
</script>
</head>
<body>
<div id="Message">
  <table width="300" border="0" align="center" cellpadding="1" cellspacing="1" bgcolor="#CCCCCC">
    <tr>
      <td height="28" align="right" bgcolor="#F2F2F2"><span style="cursor:pointer;" onclick="javascript:hideScreen();">关闭</span>  </td>
    </tr>
    <tr>
      <td height="150" align="center" bgcolor="#F2F2F2">已经锁屏 ..... </td>
    </tr>
  </table>
</div>
<div id="Screen"></div>
<span style="cursor:pointer;" onclick="javascript:showScreen();">锁屏</span>
</body>
</html>
学习了。不过如果不需要锁屏的话，只需要部分锁住的话，可以利用代码让其控件不可用enable=false，嘿嘿。
<html>
<head>
    <title></title>
    <script>
function abc() {
           document.getElementById("Button1").attachEvent("onclick", function() {
                 var mask = document.getElementById("mask");
                if (mask.style.display == "none")
                    mask.style.display = "inline";
                else
                    mask.style.display = "none";
                return false;
            })
        }
    </script>
</head>
<body onload="abc()">
    <div>
    <input id="Button1" text="button"/>

          </div>
    <div id="mask" runat=server style="background-color:White;filter:alpha(opacity=40);opacity:0.4; height:100%; z-index:10; position:absolute; left:0px;top:0px; width:100%;display:none">
    <img src="image/1G22RL3-2.gif" alt="正在载入..." style=" width:80px; height:80px; position:absolute; left:50%; margin-left:-40px; top:50%; margin-top:-40px;filter:alpha(opacity=100);opacity:1"  />

    </div>
</body></html>
用过ajax异步刷新没？如果用过，你应该知道怎么配合这个遮罩层用吧，
你可以用js声明一个ajax对象，
如果是ie：xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" )，
然后用xmlhttp_request对象向服务器提交信息，执行你需要的后台操作，xmlhttp_request对象有一个状态值http_request.readyState，用于监视当前ajax对象与服务器的交互情况，当状态值为4时，表示服务器已经处理完你提交的请求了，你可以在这时让遮罩层消失。xmlhttp_request.onreadystatechange = function(){
　　if (http_request.readyState == 4) { // 这里写让遮罩层消失的代码 }
　　};大概就是这样，我没办法给你说的黑细致，网上有很多介绍ajax的文章，我就难得打字了。
其实屏蔽层还是不怎么行的.你试试多按记下tab键就知道了但是相对来说呢.还是比较友好的.起码可以遮住按钮不让鼠标点.但是依然可以通过tab来选择的
我想目的也算达到了吧.
处理完成之后再把层的display设置一下就可以显示原先的页面了
还是送佛送到西吧，
楼主如果你对ajax不是很熟悉的话，我也不想推荐你用什么jquery库了，我们直接用.net自己封装好的异步刷新来解决你的问题算了，.net的 AJAX Extension你应该用过吧？我刚刚给你写了一个例子，主要用到UpdatePanel和UpdateProgress控件，以下是代码：
页面代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Mask.aspx.cs" Inherits="Mask" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

</head>
<body>
    <form  id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdateProgress DynamicLayout=false  ID="UpdateProgress1" runat="server">
    <ProgressTemplate>
        <div id="mask" runat=server style="background-color:White;filter:alpha(opacity=40);opacity:0.4; height:100%; z-index:10; position:absolute; left:0px;top:0px; width:100%;display:inline">
        <img src="image/1G22RL3-2.gif" alt="正在载入..." style=" width:80px; height:80px; position:absolute; left:50%; margin-left:-40px; top:50%; margin-top:-40px;"  />
        </div>
    </ProgressTemplate>
    </asp:UpdateProgress>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Button runat="server" Text="Button" onclick="Unnamed1_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body></html>
后台代码（我设置线程休眠5秒钟用于查看效果）：using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Threading;public partial class Mask : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {    }
    protected void Unnamed1_Click(object sender, EventArgs e)
    {
        Thread.Sleep(5000);
    }
}
屏蔽层关掉也很简单，在<body onload="hideScreen();">
了解下页面的执行顺序就知道，它会在后台时间执行完后运行onload事件，自然就解屏了。
搞过不过用的3.5sp1包中的 EXT控件搞的