┛┛┛如何实现这样的效果：当提交表单的时候，页面上所有内容被一几乎透明的层挡住，提交完成后这个层消失

div 如果是2.0,可以用ajax的控件

实现的过程很简单：
1.在界面上添加一个要显示的层：
<div id="doing" runat="server" style="Z-INDEX: 12000; LEFT: 0px; WIDTH: 100%; CURSOR: wait; POSITION: absolute; TOP: 0px; HEIGHT: 100%">
            <table width="100%" height="100%">
                <tr align="center" valign="middle">
                    <td>
                        <table width="169" height="62" bgcolor="#99cccc" style="FILTER: Alpha(Opacity=75); WIDTH: 169px; HEIGHT: 62px">
                            <tr align="center" valign="middle">
                                <td>页面提交中.<br>
                                    Loading.</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div> 当然，大家可以自定义的更漂亮一点，加一些图片什么的，我使用100%的层，是为了防止点击。
2.给要提交的按钮添加客户端脚本：
在Page_OnLoad事件中加入：
            this.Button1.Attributes.Add("onclick","javascript:document.getElementById('doing').style.visibility='visible';");

这是让按钮在点击后，用客户端脚本把图层显示出来。 3.重载Page的OnPreRender方法，在代码中添加如下代码：
      override protected void OnPreRender(EventArgs e)
    {
            doing.Style.Add("visibility","hidden");
        }
这是在进行Render之前，把图层隐藏掉，目前FW1.1只能放在OnPreRender中，其实最好是放在Render完成以后，在ASP.NET 2.0中添加了OnRenderComplete方法，所以等2.0以后，就可以把这语句放在RenderComplete里更合适。

我想实现的效果和
http://nicklee.yuanbo.cn/demo/SingleDemo/BusyBox/BusyBox.aspx
差不多，各位帮忙啊

wxdxy(晓鹰) 的代码应该是可行的...
楼主运行没成功?对于小数据提交,wxdxy(晓鹰)的代码显示的层一闪而过的...

I have no idea except div
too

http://nicklee.yuanbo.cn/demo/SingleDemo/BusyBox/BusyBox.aspxhttp://nicklee.yuanbo.cn/demo/SingleDemo/BusyBox/BusyBoxDotNet.axd?res=BBDN.js$YAHOO.js$dom.js$event.js$animation.js$BrowserSniff.js$Common.js$BusyBox.jsfunction Show_BusyBox1(){if(BBDN.util.Dom.documentLoaded()){BusyBox1.Show();}else{alert("The BusyBox cannot be shown if the page hasn't completely loaded.");}}
wxdxy(晓鹰)的方法有理, 不过最好用 display="none" 来隐藏, display="" 来显示

wxdxy(晓鹰)的可行.楼主要的那个站点的效果原理和他说的一样。

哈哈，那个好象是基于Yahoo UI 的
主要问题是有一个层在页面中，设计的时候不好设计，比如改变控件的位置等等

可以最开始设置层是hidden的,当它不存在就可以了。

我认为搂住的问题是这样的?---------------------------------------------------------
wxdxy(晓鹰) 的代码应该是可行的...
楼主运行没成功?对于小数据提交,wxdxy(晓鹰)的代码显示的层一闪而过的...
---------------------------------------------------------因为数据量小了,你可以加点延时,这样就可以看见效果了.
wxdxy(晓鹰)方法是可以的

@sp1234
有时候需要提交一些耗时的操作，客户还以为是系统没有反应，就再次提交，为了防止这些无效的行为和提示他系统在提交数据，做这样的界面是不为过的wxdxy(晓鹰) 的代码应该是可行的...就是不知道该这样改成能成为通用的只是现在要做一种通用的方法，不知道各位有什么好的办法

完全可以用客户端脚本实现
首先，div 足够大，
<a>sdfsdfsdfs</a>
<div id=divTest style="position:absolute;top=0px;width:200px;left:0px;height:100px;background=black;filter : progid:DXImageTransform.Microsoft.Alpha(style=3);"> </div>
<script>
divTest.style.display = "none";//控制是否显示div，放在你想放的本地或叫客户端事件中
</script>

看看这个了，http://busyboxdotnet.qsh.eu/。直接用HttpModule处理，基本上不需要在代码里调用，使用非常简单。当然你也可以挂接到按钮或其他控件上。

to xmthor()
你给的地址的Demo很不错

busyboxdotnet这个东西好象是在.net 2.0下才能用啊

楼主要是解决了的话给我个邮件告诉我方法
谢谢
[email protected]

顶
可以用CSS来实现吧
滤镜的功能
应该可以

在HTML里加入：
<div class="inner"><div id="dialogmask" class="mask" style="display:none;width:100%;height:5000px"></div>引用时调用的JS方法：
function ShowMask()
{
var elem = GetElem("dialogmask");
if(elem) elem.style.display = "block";
}
另一个JS是ClearMash()很简单
你也可以在ShowMash方法里为页面加入那段HTML

效果如:xjwang.139.com点“登录”按钮

已经找到一个很好的控件，.net 1.1下运行的，很不错，
要的给我发邮件

[email protected] 3Q

有很多人都是没有注意数据传输的啊,为什么追求页面的美观呢?因为我们要给用户一个友好的界面,可是界面好了,页面的传输呢?支持wxdxy(晓鹰)

[email protected]
谢谢，希望.net 2.0下也能用

希望楼主们已经解决的，能够给我们一份！
[email protected]

不知道有没有看看http://nicklee.yuanbo.cn/demo/SingleDemo/BusyBox/BusyBox.aspx中的代码,
没有BBDN对象呀！
不知道是什么？

学习一下，谢谢！
[email protected]

<!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" xml:lang="zh-CN" lang="zh-CN">
  <head>
    <meta name="verify-v1" content="P4T6fFCiPVxqMWZ2eztyXVzMHlnwD0wLQOq6LBHN5Y8=" />
    <title>
      政策文件_中国电力工程造价信息网</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta http-equiv="Content-Language" content="gb2312" />
    <meta name="KeyWords" content="电力工程造价,价格信息,装材,设备,电力工程" />
    <meta name="description" content="电力工程造价信息" />
    <style type="text/css">
     *{
     margin:0;padding:0;
     }
    </style>
  </head>
  <body>
    <div class="cecmbody" id="cecmpolicy">
    <div class="leftClass">
      <input type="button" value="点击这里" onclick="sAlert('我是一个渐变的sAlert',this);" />    </div>
    <div class="rightClass">
    </div>
  </div>
        <script type="text/javascript" language="javascript">

      function sAlert(txt){
  var eSrc=(document.all)?window.event.srcElement:arguments[1];
  var shield = document.createElement("DIV");
  shield.id = "shield";
  shield.style.position = "absolute";
  shield.style.left = "0px";
  shield.style.top = "0px";
  shield.style.width = "100%";
  shield.style.height = document.body.scrollHeight+"px";
  shield.style.background = "#333";
  shield.style.textAlign = "center";
  shield.style.zIndex = "10000";
  shield.style.filter = "alpha(opacity=0)";
  shield.style.opacity = 0;
  var alertFram = document.createElement("DIV");
  alertFram.id="alertFram";
  alertFram.style.position = "absolute";
  alertFram.style.left = "50%";
  alertFram.style.top = "50%";
  alertFram.style.marginLeft = "-225px" ;
  alertFram.style.marginTop = -75+document.documentElement.scrollTop+"px";
  alertFram.style.width = "450px";
  alertFram.style.height = "150px";
  alertFram.style.background = "#ccc";
  alertFram.style.textAlign = "center";
  alertFram.style.lineHeight = "150px";
  alertFram.style.zIndex = "10001";  strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";
  strHtml += "  <li style=\"background:#DD828D;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;\">[系统提示]</li>\n";
  strHtml += "  <li style=\"background:#fff;text-align:center;font-size:12px;height:120px;line-height:120px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;\">"+txt+"</li>\n";
  strHtml += "  <li style=\"background:#FDEEF4;text-align:center;font-weight:bold;height:25px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"确定\" id=\"do_OK\" onclick=\"doOk()\" /></li>\n";
  strHtml += "</ul>\n";
  alertFram.innerHTML = strHtml;
  document.body.appendChild(alertFram);
  document.body.appendChild(shield);
  this.setOpacity = function(obj,opacity){
    if(opacity>=1)opacity=opacity/100;
    try{ obj.style.opacity=opacity; }catch(e){}
    try{
      if(obj.filters.length>0&&obj.filters("alpha")){
        obj.filters("alpha").opacity=opacity*100;
      }else{
        obj.style.filter="alpha(opacity=\""+(opacity*100)+"\")";
      }
    }catch(e){}
  }
  var c = 0;
  this.doAlpha = function(){
    if (++c > 20){clearInterval(ad);return 0;}
    setOpacity(shield,c);
  }
  var ad = setInterval("doAlpha()",1);
  this.doOk = function(){
    //alertFram.style.display = "none";
    //shield.style.display = "none";
    document.body.removeChild(alertFram);
    document.body.removeChild(shield);
    eSrc.focus();
    document.body.onselectstart = function(){return true;}
    document.body.oncontextmenu = function(){return true;}
  }
  document.getElementById("do_OK").focus();
  eSrc.blur();
  document.body.onselectstart = function(){return false;}
  document.body.oncontextmenu = function(){return false;}
}
    </script>
  </body>
</html>
转载

我也很想知道你是怎么弄的，也给我发一个吧，谢谢了楼主
[email protected]

大哥发给我一个啊,
[email protected],多谢了

调试易

┛┛┛如何实现这样的效果：当提交表单的时候，页面上所有内容被一几乎透明的层挡住，提交完成后这个层消失

解决方案 »