另外,还需要设置该页面所使用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; POSITION: absolute; TOP: 50%; HEIGHT: 400px; TEXT-ALIGN: left } UNKNOWN { POSITION: fixed } #overlay { DISPLAY: none; Z-INDEX: 5000; FILTER: alpha(opacity=80); LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%; BACKGROUND-COLOR: #000; moz-opacity: 0.8; opacity: .80 } UNKNOWN { POSITION: fixed } .done#lightbox #lbLoadMessage { DISPLAY: none } .done#lightbox #lbContent { DISPLAY: block } .loading#lightbox #lbContent { DISPLAY: none } .loading#lightbox #lbLoadMessage { DISPLAY: block } .done#lightbox IMG { WIDTH: 100%; HEIGHT: 100% } 客户端脚本 由于浏览器对图层的支持不同,所以首先要确定客户端浏览器的类型。以下代码可用于判断客户端的浏览器和操作系统。 var detect = navigator.userAgent.toLowerCase(); var OS,browser,version,total,thestring; function getBrowserInfo() { if (checkIt('konqueror')) { browser = "Konqueror"; OS = "Linux"; } else if (checkIt('safari')) browser = "Safari" else if (checkIt('omniWeb')) browser = "OmniWeb" else if (checkIt('opera')) browser = "Opera" else if (checkIt('Webtv')) browser = "WebTV"; else if (checkIt('icab')) browser = "iCab" else if (checkIt('msie')) browser = "Internet Explorer" else if (!checkIt('compatible')) { browser = "Netscape Navigator" version = detect.charAt(8); } else browser = "An unknown browser"; |