Java,Jsp点击事件后,出现等沙漏,处理等待状态时,有提示在动,适合任何事件使用

第一步:在jsp页面里写个函数

<script type="text/javascript">
function XXX(){
  --方法调用完后,添加上下面的函数,如果等待时间不是特别的短,就会出现,一个图标的状态.
 displayMessage();
}


function displayMessage(){
 if(navigator.userAgent.indexOf("Firefox")==-1){
  var obj = document.getElementsByTagName('SELECT');
     for(var i=0;i<obj.length;i++){
         if(obj[i].type.indexOf("select")!=-1)
          obj[i].style.visibility = 'hidden';
     }  
  mask.style.visibility = 'visible';
  massage_box.style.visibility = 'visible';
 }   
 }
</script>

第二步,给出现的等待状态窗体加样式

<style type="text/css">
#massage_box{ position:absolute; left:expression((body.clientWidth-350)/2); top:expression(body.scrollTop+(body.clientHeight-this.offsetHeight)/2); width:350px; height:130px;filter:dropshadow(color=#666666,offx=3,offy=3,positive=2); z-index:2; visibility:hidden}
#mask{ position:absolute; top:0; left:0; width:expression(body.clientWidth); height:expression(body.scrollHeight>body.clientHeight?body.scrollHeight:body.clientHeight); background:#666; filter:ALPHA(opacity=60); z-index:1; visibility:hidden}
.massage{border:#036 solid; border-width:1 1 3 1; width:95%; height:95%; background:#fff; color:#036; font-size:12px; line-height:150%}
.header{background:#554295; height:10%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3 5 0 5; color:#fff}
</style>

第三步:在<body></body>标签下面添加如下代码.

<div id="massage_box">
  <div class="massage">
   <div class="header" οnmοusedοwn="MDown(massage_box);">
    <div style="display:inline; width:150px; position:absolute">System Information</div>
    <span onClick="massage_box.style.visibility='hidden'; mask.style.visibility='hidden'" style="float:right; display:inline; cursor:hand">×</span>
   </div>
   <div style="margin-top:30px;margin-left:30px">
    <img src="<%=request.getContextPath()%>/images/loading.gif" align="absmiddle" />&nbsp;&nbsp;&nbsp;Please wait...
   </div>
  </div>
 </div>
 <div id="mask">
 </div>

下面我添加一个运行出来的效果图.


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值