实现类似 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" onclick="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>