背景暗一点，突出当前页

最新推荐文章于 2025-08-24 10:40:56 发布

最新推荐文章于 2025-08-24 10:40:56 发布 · 162 阅读

文章标签：

#HTML

web 专栏收录该内容

16 篇文章

订阅专栏

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>弹出页面</title>
<script language="javascript" type="text/javascript">
Shade=new function()
{
var handle={};
var shade;
handle.show=function()
{
if(!shade)
{
shade=document.createElement('div');
shade.className='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()
{
Shade.show();
document.getElementById('Panel').style.display='block';
document.getElementById('frame').src='http://www.163.com';
document.getElementById('Panel').scrollIntoView();
}

function hidePanel()
{
Shade.hide();
document.getElementById('Panel').style.display='none';

}
</script>

<style>
.tb-shade {
display: none;
z-index: 2007;
filter: alpha(opacity = 60);
left: 0px;
width: 100%;
position: absolute;
top: 0px;
background-color: #000000;
opacity: .6;
}

#Panel {
margin-top: -260px;
display: none;
z-index: 2008;
left: 50%;
margin-left: -325px;
width: 650px;
position: absolute;
top: 50%;
background-color: #FFFFFF
}
</style>
</head>
<body>
<div id="Panel" style="display: none;">
<a style="display: block; float: right;" onclick="hidePanel();"
href="#">【关闭】</a>
<iframe id="frame" style="overflow-X: hidden;" src="about:blank"
frameborder="0" width="650" height="500" scrolling="yes"></iframe>
</div>

<a href="#" onclick="showPanel();return false;"><strong>代码测试</strong>
</a>
</body>
</html>