实现类似 lightbox的 页面等待效果

 <!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=utf-8" />
<title>无标题文档</title>
<style>
.alpha65{ filter:alpha(opacity=65); opacity:0.65;}
</style>
</head>

<body>
<table width="200" border="1" id="right_content_c">
  <tr>
    <td>asd</td>
    <td>asd</td>
    <td>asd</td>
  </tr>
  <tr>
    <td>asd</td>
    <td>asd</td>
    <td>asd</td>
  </tr>
  <tr>
    <td>asd</td>
    <td>asd</td>
    <td>asd</td>
  </tr>
</table>
<table width="200" border="1">
  <tr>
    <td>asd</td>
    <td>asd</td>
    <td>asd</td>
  </tr>
  <tr>
    <td>asd</td>
    <td>asd</td>
    <td>asd</td>
  </tr>
  <tr>
    <td>asd</td>
    <td>asd</td>
    <td>asd</td>
  </tr>
</table>

<!--加载中遮罩-->
<div style="position:absolute; width:100%; height:800px; background-color:#fff; display:none;z-index:20000; " class="alpha65" id="layer_loading">
 <table style="width:100%;height:100%;">
 <tr>
  <td align='center'><img src="loading.gif"></td>
 </tr>
 </table>
 <iframe style="position:absolute; z-index:-1;" width="100%" height="100%" frameborder="0" src="about:blank" scrolling="no"></iframe>
</div>
<!--背景遮罩-->
<div style="position:absolute; width:100%; height:800px; background-color:#fff; display:none;z-index:9999; " class="alpha65" id="layer_mask">
 <iframe style="position:absolute; z-index:-1;" width="100%" height="100%" frameborder="0" src="about:blank" scrolling="no"></iframe>
</div>

<input type="button" value="test" οnclick="test()" />
<script language="javascript" type="text/javascript">
 function show_layer(node, mask){
  if (!node || !node.getAttribute('id')){
   node = $('right_content_c')||document.body;
  }

  if (!node){
   return;
  }
  
  var div_top  = node.offsetTop||0;
  var div_left = node.offsetLeft||0;
  var div_width  = node.clientWidth + 2;
  var div_height  = node.clientHeight + 2;
  while (node = node.offsetParent){div_top += node.offsetTop; div_left += node.offsetLeft;}
  
  with (mask.style){
   display = 'block';
   position = "absolute";
   left = div_left;
   top = div_top;
   width = div_width;
   height = div_height;
  }
 }

 function show_loading(node){
  show_layer(node||$("right_content_c"), $('layer_loading'));
 }

 function show_mask(node){
  show_layer(node||$("right_content_c"), $('layer_mask'));
 }
 function hide_mask(){
  $('layer_mask').style.display = 'none';
 }
 function hide_loading(){
  $('layer_loading').style.display = 'none';
 }
 function test(){
  show_mask();
  show_loading();
 }
 
 function $(id){
  return document.getElementById(id);
 }
</script>

</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值