遮罩层的实现 -- "正在加载......" 效果

来源：互联网发布：鑫圣金业行情软件编辑：程序博客网时间：2024/06/03 13:59

参考：Css 的 z-index 属性

实现：

<!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<br /></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>

0 0