基于JavaScript实现图片点击弹出窗口而不是保存

一直想给安装一个缩略图点击弹出的插件，但是找了找几乎都是用的php来做的，插件的使用和安装极其繁琐，于是上网查了些demo，自己实现了一个纯js的图片弹出插件。
实现的思路是通过编写hook图片的onclick事件的函数，在函数中对body追加div元素，再将传入的图片对象放入元素中，同时再监听div的onclilck事件，当捕捉到点击，再关闭（其实是隐藏）弹出的div。
通过在函数初始化的时候收集页面所有的img元素，再为每个img元素增加onclick="picHook（this）"这条属性，这样当图片在被点击时，这个函数就能自动创建div蒙板背景，并获取被点击图片的宽度和高度，同时生成一个新的和图片一样大小的div来显示图片。当蒙板再次被点击时，hook事件再次响应，并将蒙板和图片div的style置为none，弹出的图片就被关闭了。
说起来很简单，做起来就更简单了，简单到只需要一个函数即可实现。
talking is cheap，show you my code:

<script>function picHook（pic）{/*图片对象*/var imgs = document.getElementsByTagName（"img"）;/*前景div*/var light = document.getElementById（"light"） || document.createElement（"div"）;/*背景div*/var bg = document.getElementById（"bg"） || document.createElement（"div"）;/*图片放大*/var s_pic = document.getElementById（"s_pic"） || document.createElement（"img"）;/*css对象*/var css = document.createElement（"style"）;/*css样式*/var csstext = ".pic_bg{position: absolute;margin:0 auto; 	op: 0%;left: 0%;width: 100%;padding-bottom: 1000%;ackground-color: black;z-index:1001;opacity:.80;filter: alpha（opacity=80）;overflow:scroll;}.pic_div {margin-bottom: auto;position: fixed;left:50%;	op:50%;margin-left:-250px;margin-top:-100px;z-index:1002;}";/*收集页面所有图片对象*/for（i=0; i<imgs.length;i++）{imgs[i].setAttribute（"onclick", "picHook（this）" ）;}css.type = "text/css";/*关闭图像*/if（ ！pic ）{bg.style.display = light.style.display = "none";}/*ie兼容*/if（css.styleSheet）{css.styleSheet.cssText = csstext;}else{css.appendChild（document.createTextNode（csstext））;}s_pic.setAttribute（"id", "s_pic"）;s_pic.setAttribute（"src", pic.src）;light.setAttribute（"id", "light"）;light.setAttribute（"class", "pic_div"）;light.style.display = "block";light.appendChild（s_pic）;bg.setAttribute（"id", "bg"）;bg.setAttribute（"class", "pic_bg"）;bg.setAttribute（"onclick", "picHook（）"）;bg.style.display = light.style.display;document.getElementsByTagName（"head"）[0].appendChild（css）; document.body.appendChild（bg）;document.body.appendChild（light）;}</script>

将这段代码保存在页面的head中，再将body的onload事件绑定到picHook（）函数，你的页面中就也可以实现图片点击弹出大图啦。
还存在一点小bug，主要是因为我不太熟悉css，导致div的样式做的有点难看。
css的样式我是直接声明在js里的，这样就不用再另外创建css文件了。
等过了这个节再琢磨琢磨css，优化下样式。希望本文给大家分享的JavaScript实现图片点击弹出窗口而不是保存的相关知识能够帮助到大家。