JavaScript仿Windows关机效果(2) HEIGHT: 100%; 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;