这篇文章是在学习了今年电脑报12期的网络软件周刊的题为"背景暗一点,突出当前页面"后写的,投稿人是江苏的夏从林,在这里点明一下,支持原创.
看完这篇文章我就照着试做了遍,用FF打开发现不正常,阴影的高度没有覆盖整个文档页面,所以就修改简化了点.
测试浏览器有IE6.0,FF3.0b5,MyIE2,可以适应不同的分辨率!.
测试页面: www.alwaysthere.com.cn/Test/Shadowbg/test.html
源代码如下:
| <html> <style> .bgShadow{ Z-INDEX: 2007; BACKGROUND-COLOR: #ccc; FILTER: alpha(opacity=60);opacity: .6;height:100%;width:100%} #panel{Z-INDEX:2008;position:absolute;left:20%;background:#fff;top:10%;width:50%;height:50%;} body {font-size: 13px;} </style> <body> <a href="#" onclick="Shadowbg();return false;">使背后背景变黑</a> <div id="panel" style="display:none"> <a href="#" onclick="Lightbg();return false;">关闭</a> <iframe id="frame" style="OVERFLOW-X: hidden" src="about:blank" frameBorder=0 width="100%" scrolling="yes" height="100%"></IFRAME> </div> <script> Shadow = new function() { var a= {}; var shadow = document.createElement("div"); shadow.className = "bgShadow"; document.body.appendChild(shadow); shadow.style.position = 'absolute'; shadow.style.left = '0px'; shadow.style.top = '0px'; shadow.style.display = 'none'; a.show = function() { shadow.style.display = 'block'; }; a.hide = function() { shadow.style.display = 'none'; }; return a; } function Lightbg() { Shadow.hide(); document.getElementById("panel").style.display="none"; } function Shadowbg() { Shadow.show(); document.getElementById("panel").style.display="block"; document.getElementById("frame").src="../javascript/form.html"; } </script> </body> </html> |