BACKGROUND-COLOR: #000;
moz-opacity: 0.8;
opacity: .80
}
</style>
</head>
<body>
<!--该层为覆盖层 -->
<div id="overlay"></div>
<!--该层为高亮显示层 -->
<div id="lightbox"></div>
</body>
</html>
需要注意的是，在IE浏览器中如果有<select>标记，则该标记不能被覆盖层覆盖，但在其他浏览器中则可以覆盖。
在使用IE浏览器时，要先将网页中的<select>元素隐藏起来。如以下代码可以用于隐藏页面所有的<select>元素。
selects = document.getElementsByTagName('select');
for(i = 0; i < selects.length; i++) {
selects[i].style.visibility = visibility;
}
代码实现
客户端代码
客户端的页面上有两个链接，用户单击链接后，向服务器端发送请求，并将返回信息显示到高亮层上。客户端的网页文件代码如下所示：
<html>
<head>
<title>AJAX LightBox</title>
<!-- 本例使用的css样式表文件-->
<LINK href="lightbox.css" type=text/css rel=stylesheet>
<!--prototype类文件-->
<script type="text/javascript" src="js/prototype.js" ></script>
<!--本例使用的javascript代码-->
<script type="text/javascript" src="lightbox.js" ></script>
</head>
<body>
<DIV id=container>
<UL>
<LI><A class=lbOn href="getInfo.jsp?id=one">One</A>
</LI>
<LI><A class=lbOn href="getInfo.jsp?id=two">Two</A>
</LI>
</UL>
</div>
</body>
</html>
另外，还需要设置该页面所使用CSS样式。lightbox.css样式表文件代码如下所示：
#lightbox {
BORDER-RIGHT: #fff 1px solid;
BORDER-TOP: #fff 1px solid;
DISPLAY: none;
Z-INDEX: 9999;
BACKGROUND: #fdfce9;
LEFT: 50%;
MARGIN: -220px 0px 0px -250px;
BORDER-LEFT: #fff 1px solid;
WIDTH: 500px;
BORDER-BOTTOM: #fff 1px solid;
