我的网络,我的站长中国,我的家,和中国站长一起成长... - ZZCHN.COM
----------
<DIV id=Panel style="DISPLAY: none">/*图层ID为panel，javascript代码将会调用，如果修改，请和javascript代码中的一致，首先层设置为不显示*/
<A style="DISPLAY: block; FLOAT: right" onclick=hidePanel(); href="#">【关闭】</A> /* 一个关闭此层的链接，点击后调用hidePanel()函数*/
<IFRAME id=frame style="OVERFLOW-X: hidden" src="about:blank" frameBorder=0 width=650 scrolling=yes height=400></IFRAME>/*内嵌框架，ID为frame，如果修改须和javascript代码中的名称一致，框架边框、宽度、高度、是否显示滚动条可自行修改*/
</DIV>
<SCRIPT language=javascript type=text/javascript>
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=='CSS1Compat')?document.documentElement:document.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').style.display = 'block'; /*这里的Panel应和隐藏图层内名称一致 */
document.getElementById('frame').src = "http://rgjy.net"; /*设置frame的源，可自行修改，同时“frame”名称和隐藏图层内一致*/
document.getElementById('Panel').scrollIntoView();
}
function hidePanel() { /*隐藏panel函数 */
Shade.hide();/*执行Shade.hide命令，暗色消失*/
document.getElementById('Panel').style.display = 'none'; /*将隐藏图层CSS设置为none，即不显示*/
}
</SCRIPT>
<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的值要小，filter中的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>
<a href="#" onclick="showPanel(); return false;"><strong>代码测试</strong></a>/*链接上加上onclick命令，点击后执行showPanel()函数，名称应和javascript中设置相同*/
- 1
- 2
- 3
- 4
- 5
- 6
前往页