您的位置：首页 > 其它

弹出一个遮罩层有正在加载效果的文字

2014-04-17 16:44 567 查看

实现：

<!doctype html> 
<html> 
<head> 
<title>遮罩层</title> 
<meta charset="utf-8" /> 
<style> 
#cover{ 
display:none; 
position:fixed; 
z-index:1; 
top:0; 
left:0; 
width:100%; 
height:100%; 
background:rgba(0, 0, 0, 0.44); 
} 
#coverShow{ 
display:none; 
position:fixed; 
z-index:2; 
top:50%; 
left:50%; 
border:1px solid #127386; 
width:300px; 
height:100px; 
margin-left:-150px; 
margin-top:-150px; 
background:#127386; 
} 
</style> 
<script> 
function clickfunc() 
{ 
alert("clicked, 遮住之前’测试‘按钮是起作用的"); 
} 
function coverit() 
{ 
var cover = document.getElementById("cover"); 
var covershow = document.getElementById("coverShow"); 
cover.style.display = 'block'; 
covershow.style.display = 'block'; 
alert("已经遮住，’测试‘按钮已经不起作用了"); 
} 
</script> 
</head> 
<body> 
<div id="cover"></div> 
<div id="coverShow"> 
<table align="center" border="0" width="100%" cellspacing="0" cellpadding="0" style="border-collapse: collapse; height: 100px; min-height: 100px;" bgcolor="#127386"> 
<tr> 
<td height="30" style="font-size: 12px;">正在加载，请稍后......</td> 
</tr> 
<tr> 
<td align="center" bgcolor="#ffffff"> 
这里加载一个img src为动态的gif 
 
</td> 
</tr> 
</table> 
</div> 
<div> 
这里面是内容 
<span>所有的内容都被cover遮住</span> 
<div> 
<font style="color:red"> 
两个遮罩层 
<br/> 
第一个遮罩层cover是将整个body盖住，width=100%,height=100%. 
第二个遮罩层coverShow居中显示，可以在里面加载img元素。 
</font> 
</div> 
<input type="button" value="测试" onclick="clickfunc()"/> 
</div> 
<input type="button" value="遮住" onclick="coverit()"/> 
</body> 
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航