位置：首页>> 网络编程>> JavaScript>> 简写一个的lightbox显示隐藏层效果（兼容）

简写一个的lightbox显示隐藏层效果（兼容）

作者：bujichong　来源：经典论坛　发布时间：2010-07-23 20:02:00　

标签：lightbox,隐藏,显示

经常到这来抄抄改改代码，也贡献一个代码，主要是讨论研究用，没有封装

可以进一步改进

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>页面</title><style type="text/css">* { margin:0px; padding:0px;}#cover{position:absolute;top:0;left:0;z-index:100;visibility:hidden;background:#666;}.shadow{position:absolute;top:0;left:0;z-index:200;visibility:hidden;}#a_open,a_close{cursor:hand;cursor:pointer; color:red;}</style></head><body><div id="cover" onClick="DecOpacity();"></div><a id="a_open" href="#" onClick="show('cover','contBox');return false;">来点我</a><div id="contBox" class="box shadow" style="background:#FFF; width:400px; height:200px; padding:12px 9px;">这里是内容 <a id="a_close" href="#" onClick="DecOpacity();return false;">关闭</a></div></body></html><script type="text/javascript">function getPageSize(){var xScroll, yScroll;if (window.innerHeight && window.scrollMaxY) {xScroll = window.innerWidth + window.scrollMaxX;yScroll = window.innerHeight + window.scrollMaxY;} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer MacxScroll = document.body.scrollWidth;yScroll = document.body.scrollHeight;} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and SafarixScroll = document.body.offsetWidth;yScroll = document.body.offsetHeight;}var windowWidth, windowHeight;//console.log(self.innerWidth);//console.log(document.documentElement.clientWidth);if (self.innerHeight) {// all except Explorerif(document.documentElement.clientWidth){windowWidth = document.documentElement.clientWidth; } else {windowWidth = self.innerWidth;}windowHeight = self.innerHeight;} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict ModewindowWidth = document.documentElement.clientWidth;windowHeight = document.documentElement.clientHeight;} else if (document.body) { // other ExplorerswindowWidth = document.body.clientWidth;windowHeight = document.body.clientHeight;}// for small pages with total height less then height of the viewportif(yScroll < windowHeight){pageHeight = windowHeight;} else { pageHeight = yScroll;}//console.log("xScroll " + xScroll)//console.log("windowWidth " + windowWidth)// for small pages with total width less then width of the viewportif(xScroll < windowWidth){pageWidth = xScroll;} else {pageWidth = windowWidth;}//console.log("pageWidth " + pageWidth)arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) return arrayPageSize;}var pageS=new Array();pageS=getPageSize();var contBox=document.getElementById("contBox");var cover=document.getElementById("cover");var tmpAlpha=0.0;var tmpAlphaN=0.5;function show(cover,id){var objCover=document.getElementById(cover);var objId=document.getElementById(id);var scrollW = pageS[2]; var scrollH = pageS[3]; var T=(scrollH-objId.offsetHeight)/2+document.body.scrollTop||document.documentElement.scrollTop;var L=(scrollW-objId.offsetWidth)/2+document.body.scrollLeft||document.documentElement.scrollLeft;objCover.style.width = scrollW+"px";objCover.style.height= scrollH+"px";objCover.style.visibility="visible";objId.style.visibility="visible";objId.style.top=T+"px";objId.style.left=L+"px";AddOpacity();}function hide(cover,id){var objCover=document.getElementById(cover);var objId=document.getElementById(id);objCover.style.visibility="hidden";objId.style.visibility="hidden";}function AddOpacity(){contBox.style.opacity=tmpAlpha;contBox.style.filter="alpha(opacity="+tmpAlpha*100+")";cover.style.opacity=tmpAlpha;cover.style.filter="alpha(opacity="+tmpAlpha*60+")";tmpAlpha+=0.05;if(tmpAlpha>=0.5){cover.style.opacity = 0.5;}if(tmpAlpha>=1){contBox.style.opacity = 1;return;}else{setTimeout("AddOpacity()",20);}}function DecOpacity(){contBox.style.opacity=tmpAlphaN;contBox.style.filter="alpha(opacity="+tmpAlphaN*100+")";cover.style.opacity=tmpAlphaN;cover.style.filter="alpha(opacity="+tmpAlphaN*60+")";tmpAlphaN-=0.05;if(tmpAlphaN<=0){contBox.style.opacity = 0;contBox.style.visibility="hidden";cover.style.visibility="hidden";tmpAlpha=0.0;tmpAlphaN=0.5;//clearTimeout()return;}else{setTimeout("DecOpacity()",20);}}</script>

投稿

简写一个的lightbox显示隐藏层效果（兼容）

猜你喜欢