背景暗一点，突出当前页面
技术与开发
我在淘宝网上注册时，无意中点击了右侧的雅虎邮箱链接，弹出一个注册界面同时将淘宝页面内容变暗了。我觉得这个很有趣，想应用到我的网页上，不知道该怎么做？
你是不是看到别人的网站和社区的亮点功能很心动？想把它们搬进自己的网站或社区中吗？你是不是在网上看到新奇或热门的新功能，想自己模仿设计一下？来我们的“网络模仿秀”瞧瞧，一定有你想要的！如果你有什么网络功能的需求，请写信给我们，投稿信箱：pcw-chendx@vip.sina.com。
要给自己的网页增加这个效果，非常容易。首先我们设计一个隐藏图层，然后把隐藏图层跟链接结合以来，当用户点击链接时，隐藏图层就显示并将网页后面内容变暗。这里我们要用到层内嵌框架技术，它具有弹出界面并突出显示功能，可以用在图片重点展示效果设计上。
第一步 设计隐藏图层
隐藏图层是该效果最主要的内容，我们要实现它，先要在已有的层中增加一个空白的框架，添加框架的代码请到http://www.cpcw.com/bzsoft下载。
第二步 控制隐藏图层
隐藏图层虽然有了，如果没有JavaScript命令，图层就无法显示，效果就等于零。因此我们需要在网页中＜script＞代码区添加相关代码，其中关键代码如下（完整代码下载地址http://www.cpcw.com/bzsoft）。
shade = new function（） { /*新建一个Shade函数，当隐藏图层显示时，将网页后面变暗*/
var handle = {};
var shade;
handle.show = function（） {
if （！shade） {
shade = document.createElement
（'div'）; /*新建一个Div元件*/
shade.className = 'tb-shade'; /*设置Shade区CSS为'tb-shade'*/
document.body.appendChild（shade）;
with（（document.compatMode=='CSS1 Compat'）？document.documentElement:docu
ment.body） {
var ch = clientHeight， sh = scrollHeight;
shade.style.height = （sh > ch？sh : ch） + 'px';
shade.style.width = offsetWidth + 'px';
shade.style.display = 'block';
}
handle.hide = function（） {
shade.style.display = 'none';
};
return handle;
function showPanel（） { /*显示Panel函数*/
Shade.show（）;/* 执行Shade.show命令让背景变暗*/
document.getElementById（'Panel'）.sty le.display = 'block'; /*这里的Panel应和隐藏图层内名称一致 */
document.getElementById（'frame'）.src = "http://rgjy.net"; /*设置Frame的源，可自行修改，同时Frame名称要和隐藏图层内一致*/
document.getElementById（'Panel'）.scr ollIntoView（）;
}
function hidePanel（） { /*隐藏Panel函数 */
Shade.hide（）;/*执行Shade.hide命令，暗色消失*/
document.getElementById（'Panel'）.sty le.display = 'none'; /*将隐藏图层CSS设置为不显示*/
第三步 使用CSS控制显示位置
隐藏图层能被控制了，接下来我们使用CSS代码来控制图层的显示位置及样式，在网页顶部
区添加如下代码：＜STYLE＞
.tb-shade {DISPLAY: none; Z-INDEX: 2007; FILTER: alpha（opacity=60）; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #ccc; opacity: .6}/*Z-INDEX可自行修改，但必须比#Panel的值要小，Alpha控制显示透明度，可自行调整*/
#Panel { MARGIN-TOP: -260px; DISPLAY: none; Z-INDEX: 2008; LEFT: 50%; MARGIN-LEFT: -325px; WIDTH: 650px; POSITION: absolute; TOP: 50%; BACKGROUND-COLOR: #fff}/*设置隐藏层位置、宽度，可自行修改*/
＜/STYLE＞
小知识：Z-INDEX是设置对象的层叠顺序的样式。该样式只对Position属性为Relative或Absolute的对象有效。这里的层叠顺序也可以说是对象的“上下顺序”。数字越大显示越靠前。
第四步 通过链接实现效果
这种效果是在用户点击链接后才激活的，因此最后还要把效果跟链接结合起来，在网页中需要点击的链接处添加如下代码:
＜a href="#" onclick="showPanel（）; return false;"＞＜strong＞代码测试＜/strong＞＜/a＞/*链接上加上Onclick命令*/
总结
这种页面显示效果可以内嵌网页，减少页面占据的空间，增加网页可用性。此外，我们还可以利用这种方式内嵌图片，可以得到非常炫丽的图片显示效果。