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

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

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

可以进一步改进

<!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,隐藏,显示

投稿

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

猜你喜欢

Python 生成多行重复数据的方法实现

python 常见的排序算法实现汇总

Python + selenium + crontab实现每日定时自动打卡功能

Microsoft Office Access 2007使用技巧

Go语言map字典用法实例分析

Django项目实战之配置文件详解

pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作

python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法

Springboot集成Camunda使用Mysql介绍

Java实现基于JDBC操作mysql数据库的方法

Go语言TCP从原理到代码实现详解

python 定时修改数据库的示例代码

Python入门教程(三十一)Python的Try和Except

hello world程序集锦

将string类型的数据类型转换为spark rdd时报错的解决方法

20个解决日常编程问题的Python代码分享

Javascript实现的鼠标经过时播放声音

带你了解Python妙开根号的三种方式

Pycharm debug调试时带参数过程解析

浅谈Python实现Apriori算法介绍