我想让buton的click事件的结果返回之前,让页面变成灰色,所有的空间都是不可选的状态。而且,做好可以在页面的最中间显示一个图标。然后,在click事件的结果返回以后,在页面上显示结果,并让页面的颜色和可选状态恢复正常。请问怎么实现。这个效果通过ExtJs的控件好像可以实现,但是我现在想不用它的情况下实现。
已经试验过的方法有
1 在Response.Write("<div id=webclose></div>");
   在发送请求之前,让页面被半透明的Div盖住,但是提示解析错误。并且,不知道请求返回后怎么让div消失。
2 在HTML中定义一div控件,在发送请求之前,让这个div最大化,请求完成后,让它最小化。
    div的大小好像并不受我控制,所以失败。
3 页面被一个大的div围住,然后,在发送请求之前,通过javascript让这个div.disabled = true;
   结果是页面并没有变成不可选的状态。请大家帮忙想想办法吧。谢谢。

解决方案 »

  1.   

    在body开始处加
    <body>
    <script language="javascript" type="text/javascript">            document.write("<div id='loading_bg' style='position:absolute;z-index:99;width:100%;height:2000px;background-color:#FFFFFF;filter:Alpha(opacity=70);'></div>");
                document.write("<div id='loading_logo' style='position:absolute;z-index:100;text-align:center;padding-top:250px;width:100%;line-height:24px;'>loading....<br/><img src='images/initbar.gif' /></div>");    </script>在body结束前加<script language="javascript" type="text/javascript">
            document.getElementById('loading_bg').style.display='none';document.getElementById('loading_logo').style.display='none';
         </script>
    </body>
      

  2.   

    或者用上面代码给body加onload事件
      

  3.   

    这是我在项目中自编的, 不光会有一个遮罩层,还会弹出一个自定义的提示div,希望会对你有帮助:
    其中$('xxx')是doucment.getElementById('xxx')的简写
          <div id="divMask" style="filter: alpha(opacity=50);opacity:0.5;position:absolute;top:0px;left:0px;z-index:100;width:0px;height:0px; background:#00A0F0;"> </div>
          <div id="divPopup" style="position:absolute; padding:2px;background:#FFFFFF; border:1px solid #FF0000; top:0px;left:0px; width:300px;z-index:101;display:none;" >
            <table class="title" MoveID="divPopup" style="width:100%;color:yellow; padding:6px;cursor:move" cellspacing="0" cellpadding="6"><tr><td id="popTitle" MoveID="divPopup"></td></tr></table>
    <br />
    <div id="popContent" style="margin:6px;"></div>
            <br />
            <div align="center" style="margin-bottom:6px;">
              <input type="button" value="确定" name="btnPopupOK" id="btnPopupOK" onclick="top.hideAll()">
              </input>
            </div>
          </div><script type="text/javascript">
    var itimeInterval = -1;
    var secondRest = 10;
    var act = null;
    function showPop(title, content, action)
    {
        secondRest = 10;
    var msk = $("divMask");
    var p = $("divPopup");
    var s = $("divShadowFrame")
    msk.style.width = document.documentElement.scrollWidth + "px";
    msk.style.height = document.documentElement.scrollHeight + "px";
    msk.style.display = "";
    p.style.display = "";
    p.style.top = (document.documentElement.scrollTop + document.documentElement.clientHeight/2 - p.clientHeight/2) + "px";
    p.style.left = (document.documentElement.scrollLeft + document.documentElement.clientWidth/2- p.clientWidth/2) + "px";
    $("popTitle").innerHTML = title;
    if (content != null) $("popContent").innerHTML = content;
    $("btnPopupOK").focus();
    act = action;
    }function hideAll()
    {
    var msk = $("divMask");
    var p = $("divPopup");
    msk.style.width = msk.style.height = "0px";
    msk.style.display = 'none';
    p.style.display = 'none';
    if (act) act();
    }
    </script>
      

  4.   

    <div id=webclose> runat=server一下就好控制了
      

  5.   

    结帖!!
    谢谢大家的回复。在bwangel的提示下,我用下面的JavaScript代码实现了
    <!--在要盖住的DIV里面,追加下面的HTML代码:-->
     
         <div id="divMask" style="filter: alpha(opacity=50);opacity:0.5;position:absolute;z-index:100;width:0px; height:0px; background:#FFFFCC;text-align:center;vertical-align:middle ">
        <p style=" position:static;position:absolute; top:50%"><img src="..images/loading.gif" style="position:static;position:relative;top:-50%;left:-50%;"/></p></div>
         <script type="text/javascript">    var DIV_MSK = "divMaskContainer";   //要盖住的DIV名字
        
        //显示Loding DIV
        function showMask(action)
        {
            // 盖住后显示的Loding DIV
            var divMask = document.getElementById("divMask");
            // 要盖住的DIV
            var divTabCon = document.getElementById(DIV_MSK);
            
            //高度和宽度的设定
            divMask.style.width = divTabCon.style.width;
            divMask.style.height = divTabCon.style.height;
            divMask.style.display = "";
        }
        
        //隐藏盖住后显示的Loding DIV,显示原来的DIV
        function hideMask()
        {
            var msk = document.getElementById("divMask");
            msk.style.width = msk.style.height = "0px";
            msk.style.display = 'none';
        }
    </script>
    然后分别调用showMask()和hideMask()就可以控制MASK DIV的显示和隐藏了。